CSS Tutorial For Beginners 17 - Adjacent Selectors

Hey ninjas, what's going on? In this CSS tutorial for beginners we're going to go a little deeper down the rabbit whole and take a look at adjacent selectors. Adjacent selectors are great for targeting those hard-to-reach places - and by the way this isn't an ad for a vacuum cleaner - when other selectors fail. Anyway, keep coding and have fun!

========== CSS for Beginners Playlist ==========

========== HTML Basics Course ==========

========== The Net Ninja ============

========== Social Links ==========

[neolopus]

awesome!
Btw, now i scream at the beggining of the videos and my dog is getting pretty annoyed

[edhead]

I love you man! LOL I could have saved myself hours of grief by watching these videos first. I was about ready to pull my hair out. Thank you for making it clear and simple!!

[mirellemartis]

love the content, especially the article

[sairajdas]

Brilliant. Never knew something like that existed.

[pranitasomani]

Could you explain how to do it without a h2 tag?

<div id="all-articles">
<p>some text</p>
<p>some text</p>
</div>

How can this be done using adjacent selector?

[JoshuaDHarvey]

Great video, thanks for providing these!

[nickmorgan]

Could you add a third, or a fourth adjacent P? Or even multiple? I.e. I want to style the first adjacent tag, then p(3), p(6), p(7) in the same declaration?

Ignore that mate, just found the answer in the comments! 😊

[andreianghel]

Hey Ninja - one short question, how about when we want to select for example number 3 paragraph - what would be the "formula". Thanks mate - great videos !!!!

[imjustczarina]

Awesome video, easy to follow. Subscribed! :)

[CowMeCow]

So these Two css we learned from Lessons 16 & 17, do they function exactly the Same?
that Selects element "immediately following"?
if so, when do you use one over the other? is there rules or tips to differentiate the usage?

Lesson 16 "child combinator"
#main-content > p {
color: red;
}

Lesson 17 "adjacent selector"

#all-articles h2 + p{
color: green;
}

[OsamaBeenLagging]

It does not work for me for some reason. I have checked it multiple times, re-write whole pages... :(

[giacomorossin]

I know I'm a lot of years late but How could I select all the 3rd <p> of each article?
I mean how could I style not the very next tag after the <h2> but the others?
Thanks, Shaun for all these tutorials, I'll be gald if you could answer me

[bastian]

Hey first great videos!
and second i have my code for a navigation bar like this
<table>
<tr>
<td><a href="#">Home</a></td>
with some more td's
</tr>
</table>

i want the <td> to get a bottom border wich is no problem but i want it to appear when the mouse is hovering over the <a> tag not the <td> tag how can i do that with css ?

[itz]

If I give the eggs for example Different value from the app the all of them getting but I am not addiction that with other rules up if up it's color so the other P did I write alone Is a font Is that possible

[nikkoalminar]

Why does the P does not change after doing
#main-content h2+p{
color:green;
}
And can I also do this
#main-content #sub-content h2+p{
color: red;
}

Can I also do this m

[captain_finn]

What do you do if you want to affect the second paragraph and not the first one?

[fajarkusumahputra]

Dude if I wanna add just the only p elements that has grandparents of the h2, how could I make that?
Thanks in advance

[ushawadhwani]

What if p comes directly in div without h2 tag?

[hegazymahmoud]

Amazing Tutorials Videos & Keep going, Can you download videos about Brackets Shortcuts .

[icqgroup]

i did what you say but only first one turned to green but other two still black i don't why can you tell me?
p.s i did exactly like you did