Diskusia – 2. diel - CSS 3 selektory

Ďakujem za super vysvetlenie

V kodu

div :first-child {
   color: red;
}

asi chybi p

div p:first-child {
   color: red;
}

Ne, nechybí.

div :first-child {
   color: red;
}

označuje prvního potomka jakéhokoliv typu. Prvním potomkem značky (tagu) div v části html kódu:

<div>
    <p>První odstavec.</p>
    <p>Druhý odstavec.</p>
    <p>Třetí odstavec.</p>
    <p>Čtvrtý odstavec.</p>
</div>

je <p>První odstavec</p>, proto se obarví.

Zkus změnit html kód na:

<div>
    <div>
        <p>První odstavec.</p>
        <p>Druhý odstavec.</p>
        <p>Třetí odstavec.</p>
        <p>Čtvrtý odstavec.</p>
    </div>
</div>

pak bude prvním potomkem kořenového <div> vložený následující <div> se čtyřmi značkami (tagy) <p>. Proto se obarví všechny čtyři odstavce (protože jsou součástí prvního potomka <div> s vloženými čtyřmi odstavci).

Prioritu identifikátoru v sekci Identifikátor by lépe demonstroval styl, kde by byl uveden ve stylovém souboru jako první identifikátor a za ním teprve selektor třídy.

#cervena {
   color: red;
}:
.zelena {
   color: green;
}
.tucne {
   font-weight: bold;
}

Z něj by byla vidět priorita nastavení barvy pomocí id na červenou před nastavením pomocí class na zelenou, i když je zelená barva deklarována v souboru css později.

U pseudotříd by místo "najde první element daného typu" mělo být "najde prvního potomka (vnořený element) elementu daného typu". Obdobně také u n-tého potomka.

zdravím,

běžný zápis chápu, tj.

.nazev-tridy {
vlastnost: hodnota;
}

ale co když je zápis v tomto formátu?

.menu > ul {list-style-type: none;......}
nebo
#menu1 > ul {list-style-type: square; .....}
Co znamená znaménko ">" ?