23.Pseudo selectors. whats wrong?


#1


CSS:
fancy {
font-family: cursive;
color: violet;
}

serious {

font-family: Courier;
color:#8C8C8C;

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


#2

@pywhiz29476,

++ serious fancy
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
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child


#3

ok but , what i have to do ?


#4

@pywhiz29476,
Could you please re-edit your Original Post
so i can see what you have done in your index.html

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


#5

i edited my post, can u help me now ?


#6

@pywhiz29476
I asked for an ASCII description
like

<h3>this is a h3 with a closing h3-Tag </h3>

Look at how you are closing your h3-Tag

CSS

.fancy { 
    font-family:cursive; 
    color:Violet;}
#serious { font-family:Courier; color:#8c8c8c}
body :nth-child(4) {font-size:26px; color:red;}

#7

CSS:
.fancy { (fancy is a "class" and in css you show a class with the . before the name.)
font-family: cursive;
color: violet;
}

#serious { (serious is an "id" and in css you show an id with the # before the name.)

font-family: Courier;
color:#8C8C8C;

}
body**:**nth-child(4) { (no space between body and : )
font-size:26px;
}


#8

I have the similar issue:

HTML code

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy">
		    <p class="fancy">Some text here</p>
		</h3>
		<p id="serious">
			Serious
		</p>
		<p>
			Third paragraph
		</p>
	</body>
</html>

CSS

/*Add your CSS below!*/
.fancy{
font-family:cursive;
color:violet;}

#serious{
font-family:Courier;
color:#8C8C8C;}

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

Could someone assist me with it?


#9

Your P tag is wrapped inside a h3 tag... makes no sense at all if u think about it XD


#10

Oops... Thank you for hint :slight_smile:

But the last paragraph text size is the same :cry:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<h3 class="fancy">Header Text</h3>
		<p class="fancy">First paragraph</p>
		<p id="serious">Second paragraph</p>
		<p>Third paragraph</p>
	</body>
</html>

The issue is in CSS, but where...


#11

@ms-dok
@bitsurfer48572
Have a read in this discussion
https://discuss.codecademy.com/t/pseudo-selectors-lesson-23-23/2269/3


#12

if you want to select the 4th element inside body, you need a space between body and :nth-child(4):

body :nth-child(4)

#13

Should be:
p:nth-child(4){


#14

2 posts were split to a new topic: 23. pseudo selector


#15