NOVINKA: Kurz kybernetickej bezpečnosti teraz už od 0 €. Staň sa žiadaným profesionálom. Zisti viac:
NOVINKA: Staň sa dátovým analytikom od 0 € a získaj istotu práce, lepší plat a nové kariérne možnosti. Viac informácií:

Diskusia – 2. diel - CSS 3 selektory

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre
Avatar
micmar
Člen
Avatar
micmar:21.7.2020 9:27

Ďakujem za super vysvetlenie :-)

Avatar
Yuriy Tretyachenko
Člen
Avatar
Yuriy Tretyachenko:18.2.2021 5:14

V kodu

div :first-child {
   color: red;
}

asi chybi p

div p:first-child {
   color: red;
}
Editované
Avatar
Jiří Kofránek doc. MUDr.
Člen
Avatar
Odpovedá na Yuriy Tretyachenko
Jiří Kofránek doc. MUDr. :29.10.2021 14:26

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).

Avatar
Bohuslav Labaj
Člen
Avatar
Bohuslav Labaj:17.2.2022 13:04

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.

Avatar
Jan Roubíček
Člen
Avatar
Jan Roubíček:29.7.2023 18:32

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.

Avatar
Radim Galíček
Člen
Avatar
Radim Galíček:19.10.2023 7:55

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 ">" ?

Avatar
Rostislav Mikolaš
Člen
Avatar
Rostislav Mikolaš:19. apríla 20:55

Dal bych té kapitole trochu větší řád. Několikrát nastavujeme barvu stejných elementů, komentujeme atd., šlo by to udělat lépe, tak aby to byl jeden ucelený příklad. U těch pseudo-selektorů bych vysvětli podstatný rozdíl mezi tím, když mezi vybraným elementem (například div) a dvojtečkou je mezera a nebo není mezera ...

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 7 správy z 7.