23. Pseudo Selectors


#1

I tried everything even body:nth.child(3) or p: nth-child(3) but nothing seems to work.

Can anyone tell me the solution and no i did not use the wrong brackets or forgot one xD

Here is the code:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
	<h3 class="fancy">First Headline</h3>
	<p class="fancy">Paragraph</p>
	<p id="serious">Another Paragraph</p>
	<p>Yet another Paragraph</p>
	</body>
</html>

/*Add your CSS below!*/

.fancy {
    font-family:Cursive;
    color:violet;
    }
    
#serious {
    font-family:Courier;
    color:#8c8c8c;
    }

body: nth-child(4) {
font-size:26px;
}

Can anyone please tell me what i did wrong?

Thanks in advance!


#2

@maythe09,

Please re-edit your Post

  • leave one blank-line above of your code
  • select your code in the Post
  • then =click= on the </>-symbol-of-this-editor

Your code will then be in a pre-code state
and you will be able to make/present the proper indentations.

With Courtesy to stetim94
https://discuss.codecademy.com/t/im-having-a-problem-on-lesson-11-23/2307/3?u=leonhard.wettengmx.n

or even better use
= https://discuss.codecademy.com/t/how-do-i-format-code-in-my-posts/28351
[extra's]
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet


#3

Thank you for the advice now I know how to post xD


#4

What are you trying to accomplish?


#5

found the solution:
it's not:

body: nth-child(4) {
font-size:26px;
}

but it's:

body :nth-child(4) {
font-size:26px;
}

put the spacing on the wrong side


#7

@maythe09,
Please read
https://api.jquery.com/nth-child-selector/

The Browser =load's= this document into Memory
in a pattern that is described as
the Document Object Model
in short the DOM.
( the interpretation of the DOM is Browser & Version specific )

            html
             |
       +-----+----------+
       |                |
     head              body
       |                |
    +--+--+       +---+-+-+---+
    |     |       |   |   |   |
   link  title    h3  p   p   p
                 (1) (2) (3) (4)
                  |   |   |   +- :last-child or :nth-child(4)
                  |   |   +- :nth-child(3)
                  |   +- :nth-child(2)
                  +- :first-child or :nth-child(1)

In the description of your document in DOM-talk...
you will encounter terms like:
parent children sibling descendants ascendants...

The HTML-Element has no parent
is also called document
html-Element is a parent to 2 child-Element's
the 'head'-Element
and
the 'body'-Element.
head and body are both descendants of html

The 'head'- and 'body'-Element,
both being children to the 'html'-Element
are siblings to each-other.

The 'body'-Element is parent to 4 children
h3 p p and p
These h3 p p p Elements are children of the body-Element
and are descendats of the html-Element and the body-Element
The h3 p p p Elements are sibling's to each other.

https://api.jquery.com/nth-child-selector/
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes