Podívejte se do CSS3 Prvotřídního konstrukčního voliče

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Jedna věc, která se mi líbí o CSS3 je nové přidávání selektorů, které nám umožňují cílit prvky specificky, aniž by se spoléhaly na třída, id nebo jiný atribut prvku a ten, který zde budeme pokrývat, je následující selektor, : první typ.

: první typ selektor bude cílit na první podřízený prvek zadaného prvku, například úryvek níže bude cílit na první h2 na webové stránce.

 h2: první deklarace / * deklarace stylu * /

: první typ je také rovno : n-tého typu (1), spíše než výběr pouze První typu, můžeme dále vybrat druhý, třetí a tak dále. Následující úryvek bude cílit na druhý h2 prvek na webové stránce.

 h2: nth-of-type (2) / * deklarace stylu * /

: první typ” vs. “:první dítě”

Mohlo by se zdát, že tyto dva selektory dělají totéž, ale to tak není. Podívejme se na následující ukázku:

Řekněme, že máme pět odstavcových prvků zabalených v rámci div, takhle:

  Pragraph 1
 Pragraph 2
 Pragraph 3
 Pragraph 4
 Pragraph 5

Nyní bychom chtěli vybrat první odstavec pomocí :první dítě volič.

 p: first-child padding: 5px 10px; hraniční rádius: 2px; pozadí: # 8960a7; barva: #ff; okraj: 1px pevná # 5b456a;

A jak jsme předpokládali, první odstavec je úspěšně vybrán.

: Demo prvního dítěte

Nicméně, když my předtím přidejte jiný prvek první odstavec, řekněme h1, jako úryvek níže:

  Okruh 1
 Pragraph 1
 Pragraph 2
 Pragraph 3
 Pragraph 4
 Pragraph 5

první odstavec nebude vybrán, jako první dítě uvnitř div je už ne odstavec, ale nyní je h1.

Tak, je to situace, kdy : první typ Volič přichází k vyřešení problému.

 p: první typ padding: 5px 10px; hraniční rádius: 2px; pozadí: # a8b700; barva: #ff; ohraničení: 1px pevné # 597500;

: Demo prvního typu

“Poslední” Volič

Kde je “První”, pak tam bude také “poslední”.

Reverze dvou selektorů, které jsme diskutovali výše, jsou následující dva selektory; :poslední dítě a : last-of-type. V podstatě jsou stejné jako výše uvedené dva, kromě toho, že cílí poslední dítě zadaného prvku.

Tento úryvek bude například zaměřen na poslední odstavec uvnitř div.

 p: last-child padding: 5px 10px; hraniční rádius: 2px; pozadí: # 8960a7; barva: #ff; okraj: 1px pevná # 5b456a;

: Demo poslední dítě

A tento úryvek se zaměří také na poslední odstavec ve stejné situaci, o které jsme hovořili výše; tentokrát

následuje přímo jiný prvek.

 p: last-of-type padding: 5px 10px; hraniční rádius: 2px; pozadí: # a8b700; barva: #ff; ohraničení: 1px pevné # 597500;

: Demo typu last-of-type

Selectivizr

Stejně jako všechny nové funkce v CSS3, tyto selektory nejsou podporovány ve starých prohlížečích, hlavně Internet Explorer 6 až 8, s výjimkou :první dítě volič, jak byl přidán od CSS2.1. Jeho relativní :poslední dítě byl přidán pouze v CSS3.

Pokud jsou tedy všechny tyto selektory, které jsme zde zmínili, skutečně potřebné pro váš webový server, můžete použít knihovnu JavaScript nazvanou Selectivizr emulovat tyto funkce CSS3 selektoru.

Selectivizr je závislý na jiných knihovnách JavaScriptu, aby mohl pracovat, jako například jQuery, Dojo, Prototype a MooTools; a vidět z srovnávací tabulky na oficiálních stránkách, MooTools se zdá být schopen zvládnout všechny selektory.

Pojďme to tedy zahrnout do programu Selectivizr takto:

Výše uvedený podmíněný komentář zajistí, že tyto knihovny budou načteny pouze v aplikaci Internet Explorer 8 a níže.

Nakonec si můžete prohlédnout demo z následujících odkazů a mělo by nyní fungovat v moderních i starých prohlížečích (IE8 a níže). Zdrojový soubor si můžete také stáhnout pro další vyšetření. Užívat si.

Demo
Stáhněte si zdroj