Mit jelent a css-ben? Tobbi lent.

A > a közvetlen gyermeket jelöli. Pl ha van a kvöetkező:

<div>

    <span>Duma 1</span>

    <p>

        <span>Duma 2</span>

    </p>

</div>

És a következő CSS szabályod

div>span { color:red; }

Ezesetben a Duma 1 piros lesz, de a Duma 2 nem, mivel ott a span nem közvetlenül a div gyermeke, hanem a <p> tagé. Ellenben ha a szabályod úgy nézne ki, hogy:

div span {color:blue}

akkor mindkét span szövege kék lenne, mert mindkettő egy div-en belül van.

A CSS szabály az ÖSSZES olyan elemre vonatkozik, amire ráillik a szabály. Ha több olyan span van ami egy div közvetlen gyermeke, akkor mindegyikre vonatkozik.

Az nth-child pedig azt csinálja, amit a neve is sugall: az n-deik gyermekre vonatkozik. nth-child(2) azokat az elemeket érinti, amelyek valaminek a második gyermekei.

span:nth-child(2)

{

color:red;

}

<div>

    <p>

        <span> Duma </span>

        <span> 1 </span>

    </p>

    <span>Duma 2 </span>

    <span>Duma 3 </span>

    <span>Duma 4 </span>

</div>

Ezesetben a szabály szerint azok a span elemek lesznek pirosak, amik valaminek a második közvetlen gyermekei.

Itt konkrétan az első <p> tagből az "1", mivel az a <p> második eleme, és span is, illetve a "Duma 2", mert az a <div> második közvetlen gyermeke, és span. A többire nem. De ha pl a "Duma 2" nem <span> tagben, hanem mondjuk <p>-ben lenne, akkor arra sem vonatkozna. De amúgy ez elég világosan le van írva ha ráguglizol.