Selectors and divs question


#1

Hello, I have a question in regards to the lesson : 18, Show it if you know it.

Now, in the previous lesson (17.) the nth-child selectors worked fine, however, here nth-child selectors aren't working, here is my html code:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>Result</title>
	</head>
	<body>
		<!--Add your HTML below!-->
		<a href="https://www.google.com">Google</a> <BR>
		<a href="https://www.youtube.com">Youtube</a> <BR>
		<a href="https://www.facebook.com">Facebook</a>
	</body>
</html>

and here is my css :

a:hover {
    text-decoration: none;
    }
a:first-child {
    color: #CDBE70;
    }
a:nth-child(2) {
    color: #FFC125;
    }

the 'Facebook' link doesnt change color, why ?

Also what I also noticed in previous lesson (17)
the paragraphs were nested inside a div, however when i remove div tags they still work, the code in question is this one :

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
                 /* <div> */
			<p>I'm the first child!</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>			
               /* </div> */
	</body>
</html>

as you can see i put the div tags in comments, but it still works, all of this css gets applied:

p:first-child {
    font-family: cursive;
    }
p:nth-child(2){
    font-family: Tahoma;
    }
p:nth-child(3){
    color: #CC0000;
    }
p:nth-child(4){
    background-color: #00FF00;
    }
p:nth-child(5){
    font-size: 22px;
    }

BUT!

When i try to change my website i experiment on (just a html file on my pc ) it doesnt execute paragraph css if i type it without div

what im saying : I have this html code

<!DOCTYPE html>
<html>
<head>
  <title>Pikachu</title>
  <meta charset="utf-8">
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
  <h1>Pikachu</h1>
  <img src="images/pikachu.png" alt="pikachu"> <BR>
  <a style="text-align: center; display: block;" href="http://bulbapedia.bulbagarden.net/wiki/Pikachu">Pikachu bulbapedia</a>
  <div>
  <p>Pikachu is popularly known as the mascot of the Pokémon franchise and a major representative of Nintendo's collective mascots.</p>
  <p>It is also the game mascot of Pokémon Yellow, where it is the only starter Pokémon in that game. It has made numerous appearances on the boxes of spin-off titles.</p>
  <p>Pikachu is also the starter Pokémon in Pokémon Rumble Blast and Pokémon Rumble World.</p>
</div>
</body>
</html>

and this css code:

h1 {
  font-size: 80px;
  text-align: center;
  text-shadow: 4px 4px 2px black;
  color: yellow;
}
body {
  width: 1200px;
  margin: 0 auto;
  background-color: orange;
  padding: 0 20px 20px 20px;
  border: 10px solid black;
}
img {
  display: block;
  margin: 0 auto;
}
p:first-child {
  font-size: 60px;

}
p:nth-child(2) {
  color: #CC0000;
}

HOWEVER, if i remove the div tags in html code, the p:first-child and p:nth-child(2) selector changes do not apply.

Why is that ? Why do those p tags have to be nested inside div tags to get applied

Thanks and sorry for such a long question.


#2

OK i think i figured it out:

so in my website my first p tag is actually 5th child so i would have to write :

 p:nth-child(5) { code }

for it to work,

however what is confusing me, if i wrote:

p:first-child { code }

shouldn't it just target the first p tag? not the first child of body tag ?

this is confusing me a lot.

also what if i had 2 divs with 3 paragraphs in each, which div and paragraphs would this target then ?

p:first-child { code }

thanks again.


#3

they are working, but what you need realize that nth-child count all elements, not just the <a></a> or paragraphs. lets say i have p:first-child but my first element is a <h1></h1> the css doesn't get applied, so in your case the links are first, third and fifth child, the breaks are second and fourth.

if you don't nest the paragraphs inside the div, they aren't first and second child. they ar 4th and 5th child. All elements count, and if the element matches, the css is executed


#4

then this is wrong :
To target the third link, you can use the a:nth-child(3) selector.

3rd link is not the child of a tag but of body tag.

it should be body :nth-child(3) then ?

am i just dumb or somethings wrong here ?


#5

the exercise makes the assumption you don't insert breaks or other elements.


#6

yeah i got that now, maybe that should be edited and expressed clearly how they work since i got confused someone else could get,

thanks for your effort and explanation


#7

nothing is stopping you from checking external documentation (like this one), yea, nth-child is a bit confusing.


#8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.