nth-of-type vs. nth-child - CSS Selectors

Показать описание

CSS selectors: understand the difference between nth-of-type and nth-child. Working with HTML5 and CSS3. Created by Gregg Fine.

📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:

🗣JOIN the Code Creative Facebook group! :

🌐 The Code Creative Official Website

🎓 The Code Creative Courses

✅ Let's connect:

Twitter - @GreggFine

Instagram - /greggfineguitar

Рекомендации по теме

Комментарии

🗣JOIN the Code Creative Facebook group! :

TheCodeCreative

Extremely clear and simple to understand in only 3 minutes. Thank you very much for this explanation, now I can stop screaming at my computer

WhatTheCinnamonToastFck

📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:

TheCodeCreative

Went through a few videos to try to understand this concept, and yours was the clearest for me! Thanks for the content.

lesliewilliams

Finally someone made it clear like that!

haiderwaseem

Thanks very much...everything is clear now.

shirmilwelgama

very nice and easy to follow.
Just a little question: if you write div:nth-child(){ color: red} does it treat any tag as child but changes the color only for those that are divs, or doest it initially treat only the divs as children?

adennis

This is amazing, I ran through this "problem" when I was using first-child, but the element I wanted was the second child, not the first, I needed to change it to nth-of-type(1) to work

DanielRios

hello. I got your explanation so far. thank u for that
but at the same time I can´t understand this example:
html:
<ul>
<li>Cuestionario <span>Espai</span></li>
<li>Nosotros
<ul>
<li>Alumnos</li>
<li>Profesores</li>
<li>Escuela</li>
<li>Asesoramiento</li>
</ul>
</li>
<li>Escuela virtual</li>
<li>Blog</li>
<li>Redes sociales</lI>
<li>Condiciones</li>
<li>Contacto</li>
</ul>

CSS: li:nth-child(3){color:red;}

the answer is Escuela and Escuela virtual, I understand escuela virtual but I can´t comprehend why *escuela* will have color red.
thanks

GenesisLopez-hqig