CSS3 selektory

CSS3 přichází s armádou nových selektorů. Nejjednodušší bude podívat se na ně optikou toho, jakou verzi Internet Exploreru na svých projektech musíte podporovat, abyste je mohli použít.

IE8+

  • span[att^="val"] – hodnota atributu attr začíná řetězcem „val“. Hojně využívají CSS frameworky pro tvorbu gridu. Třídy .span1, .span2 atd. selektují takto: span[class^="span"]
  • span[att$="val"] – hodnota atributu končí řetězcem „val“.
  • span[att*="val"] – hodnota atributu obsahuje řetězcem „val“.
  • p ~ ul – mají stejného rodiče, ale nejsou vedle sebe jako u p + ul.

IE9+

  • span:empty – všechny <span> elementy, které neobsahují dceřiný element ani text.
  • div:target – vybírá část zvýrazněnou přes kotvu (/adresa#kotva).
  • input:enabled, input:disabled – formulářové pole, kam není možné zapisovat.
  • input:checked – vybírá aktivovaný input typu checkbox, radio nebo option.
  • *::selection – nastylování vybraného textu.
  • span:not(.blue) – všechny spany kromě těch s třídou blue.
  • :first-child, :last-child, :only-child – první, poslední nebo jediný potomek svého rodiče.
  • :nth-child(n), :nth-last-child(n) – n-tý potomek od začátku nebo od konce. Nejlépe se tento šílený (ale moc užitečný) selektor naučíte s pomocí online nástroje NthMaster.
  • :first-of-type, :last-of-type, :only-of-type – první, poslední, jediný tohoto typu elementu.

Poznámka: Ukázky kódu v článku obsahují pouze standardní syntaxi podle CSS3 norem. Ve některých případech je potřeba použít vendor prefix varianty. Na aktuální situaci se podívejte na shouldiprefix.com.

Komentáře