Výběr prvního dítěte v CSS: výběr prvního prvku

Pseudo-třída prvního dítěte v CSS se používá k výběru prvního prvku v kontejneru. V tomto případě se specifický typ prvku nezohledňuje, pouze jeho pozice vzhledem k rodiči má hodnotu. V práci tohoto selektoru jsou některé jemnosti, které je třeba chápat pro správné použití.

Pseudo-třídy CSS

Spolu s identifikátory, třídami, značkami a atributy jsou pseudotřídy jedním z typů selektorů CSS. Jejich funkcí je, že nemohou být instalovány přímo do HTML.

Příklady pseudotříd jsou „na prvním řádku v kontejneru“, „je první písmeno ve slově“, „první dítě v mateřské společnosti“. Prohlížeč dokáže detekovat tyto věci pouze poté, co analyzoval stránku a provedené DOM strom, a v některých případech až po rendering.

Přítomnost takového mechanismu v CSS umožňuje definovat návrh, který není spojen s kódem HTML, což otevírá velké možnosti pro návrh.

Výběr první položky

Pseudo-třída prvního dílu v CSS je zodpovědná za výběr prvního prvku v nadřazeném kontejneru. Textové uzly jsou ignorovány, počítají se pouze platné značky.

Najdeme první prvky ve dvou jednoduchých strukturách HTML.

První položka
Druhá položka
Třetí bod

 

Jsou tam jen dvěma způsoby žít život. První - jako by nebyly žádné zázraky. Druhý - jako by tam byly jen zázraky. Albert Einstein

V důsledku toho bude vybrána první položka seznamu a značka určující tučné písmo písma.

První položka
dvěma způsoby

Syntaxe

Všechny pseudotřídy v CSS jsou definovány specifickou šablonou. Nejprve je zadán hlavní volič, pak požadovaná pseudo-třída oddělena dvojtečkou.

b: první dítě {text-decoration: underline-}

Takové pravidlo zdůrazní text prvního prvku b uvnitř každého kontejneru.

Každý se chce změnit na světě, ale nikdo se nechce měnit sám.Leo Tolstoy
Kdo ví, on dělá, kdo neví, jak - učí ostatním.Bernard Shaw

Screenshot zřejmé, že vybrat jen ty prvky, které odpovídají selektoru tagů současně b a volič pseudo: První dítě. Styl byl aplikován uvnitř každého kontejneru, v tomto případě, všechny položky v seznamu.

Kromě tagu lze použít i jiný volič CSS jako hlavní, například:

.třída: první dítě {} [alt]: první dítě {} *: první dítě {}

Časté chyby

Pseudotřída prvního prvku prvního dílu v CSS vybere striktně značku, která je na prvním místě v nadřazeném kontejneru. Dokonce i když se element zcela shoduje s voličem, ale není prvním dítětem, nebude vybrán.

Například uveďte předchozí seznam citací a přeneste autory na začátek.

Leo TolstoyKaždý se chce změnit na světě, ale nikdo se nechce měnit sám.
Bernard ShawKdo ví, on dělá, kdo neví, jak - učí ostatním.

I když volič prvků zůstává stejný, styl CSS se nepoužije, protože první prvek v kontejneru je nyní i.

Další chyba ignoruje tag
. Jedná se o stejný článek HTML jako ostatní. Pokud je v kontejneru před vyhledávacím blokem, volič CSS pro první dítě nefunguje.

Účetní typ prvku

Abyste se vyhnuli takovým situacím, můžete použít prvotřídní pseudo-třídu. Funguje stejně jako první volič CSS, ale zohledňuje typ prvku.

b: prvotřídní {text-decoration: underline-}

Nyní se při výpočtu berou v úvahu pouze prvky odpovídající selektoru b.

Výběr poslední položky

Existuje také pseudotřídní poslední dítě, které pracuje podobně jako první volič CSS, ale začne počítat položky od konce kontejneru.