Existuje mnoho způsobů, jak můžete vybrat prvky v CSS. Nejzákladnější výběr je podle názvu značky, jako p ( ). Atributy používá téměř cokoli konkrétnějšího než selektor značek - classa IDoba tyto atributy vybírají na prvcích HTML. Ale classi IDnejsou pouze atributy vývojáři mohou vybrat. Jako selektory můžeme použít kterýkoli z atributů prvku.
Výběr atributů má speciální syntaxi. Zde je příklad:
a(href="https://css-tricks.com") ( color: #E18728; )Jedná se o výběr přesné shody, který vybere pouze odkazy s přesnou hrefhodnotou atributu „https://css-tricks.com“.
Sedm různých typů
Selektory atributů ve výchozím nastavení rozlišují velká a malá písmena (viz shoda nerozlišujících velká a malá písmena níže) a jsou zapsány v závorkách ().
Existuje sedm různých typů shod, které můžete najít pomocí selektoru atributů, a syntaxe je u každého odlišná. Každý ze složitějších selektorů atributů staví na syntaxi selektoru přesné shody - všechny začínají názvem atributu a končí znakem rovnosti, za nímž následují hodnoty atributů, obvykle v uvozovkách. Mezi názvem se atributem a znaménkem rovná se je rozdíl mezi selektory.
(data-value) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Hodnota obsahuje: hodnota atributu obsahuje výraz jako jedinou hodnotu, hodnotu v seznamu hodnot nebo jako součást jiné hodnoty. Chcete-li použít tento volič, přidejte hvězdičku (*) před znaménko rovnosti. Například img(alt*="art")vybere obrázky s alternativním textem „abstraktní umění“ a „sportovec začínající nový sport“, protože hodnota „umění“ je ve slově „začínající“.
Hodnota je v seznamu odděleném mezerou: hodnota je buď jedinou hodnotou atributu, nebo je celou hodnotou v sadě hodnot oddělených mezerami. Na rozdíl od selektoru „obsahuje“ nebude tento selektor hledat hodnotu jako fragment slova. Chcete-li použít tento volič, přidejte před znaménko rovná se vlnovku (~). Například img(alt~="art")vybere obrázky s alternativním textem „abstraktní umění“ a „umělecká show“, ale ne „sportovec začínající nový sport“ (který by vybral selektor „obsahuje“).
Hodnota začíná: hodnota atributu začíná vybraným výrazem. Chcete-li použít tento volič, přidejte před znaménko rovná se stříška (^). Nezapomeňte, záleží na velikosti písmen. Například img (alt = „art“) vybere obrázky s alternativním textem „umělecká show“ a „umělecký vzor“, ale ne obrázek s alternativním textem „Arthur Miller“, protože „Arthur“ začíná velkým písmenem .
Hodnota je na prvním místě v seznamu odděleném pomlčkami: Tento volič je velmi podobný voliči „začíná na“. Zde selektor odpovídá hodnotě, která je buď jedinou hodnotou, nebo je první v seznamu hodnot oddělených pomlčkou. Chcete-li použít tento selektor, přidejte před znak rovnosti znak kanálu (|). Například li(data-years|="1900")vybere položky seznamu s data-yearshodnotou „1900–2000“, ale nikoli položku seznamu s data-yearshodnotou „1800–1900“.
Hodnota končí: hodnota atributu končí vybraným výrazem. Chcete-li použít tento volič, přidejte znak dolaru ($) před znaménko rovnosti. Například a(href$="pdf")vybere každý odkaz, který končí na .pdf.
Poznámka k uvozovkám: Za určitých okolností můžete obejít bez uvozovek, ale pravidla pro výběr bez uvozovek jsou nekonzistentní mezi prohlížeči. Nabídky vždy fungují, takže pokud je budete používat, můžete si být jisti, že váš selektor bude fungovat.
Podívejte se na Selektory atributů pera od CSS-Tricks (@ css-tricks) na CodePen.
Zábavný fakt: s hodnotami se zachází jako s řetězci, takže nemusíte dělat žádné fantastické úniky znaků, aby se shodovaly, jako kdybyste použili neobvyklé znaky v selektoru třídy nebo ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Porovnávání bez rozlišování velkých a malých písmen
Selektory atributů nerozlišují velká a malá písmena jsou součástí specifikace pracovní skupiny CSS 4. úrovně. Jak již bylo zmíněno výše, řetězce hodnot atributů ve výchozím nastavení rozlišují velká a malá písmena, ale lze je změnit na malá a velká písmena přidáním itěsně před koncovou závorku:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Porovnávání bez rozlišování velkých a malých písmen může být opravdu užitečné pro cílení na atributy, které obsahují nepředvídatelný text napsaný člověkem. Předpokládejme například, že jste stylovali bublinu v chatovací aplikaci a chtěli přidat „mávající ruku“ ke všem zprávám s textem „ahoj“ v nějaké formě. Dalo by se to pouze s CSS pomocí match-insensitive matcheru k zachycení všech možných variant:
Podívejte se na shodu atributu CSS bez rozlišování malých a velkých písmen pomocí CSS-Tricks (@ css-tricks) na CodePen.
Kombinovat je
Selektor atributů můžete kombinovat s dalšími selektory, jako je značka, třída nebo ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Nebo dokonce kombinujte více selektorů atributů. Tento příklad vybere obrazy s alternativním textem, který obsahuje slovo „osoby“ jako jedinou hodnotu, nebo hodnotu v prostoru seznamu odděleny, a na srchodnotu, která obsahuje hodnotu „Lorem“:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Podívejte se na kombinované atributy pera a výběr pouze podle atributů pomocí triků CSS (@ css-tricks) na CodePen.
Selektory atributů v JavaScriptu a jQuery
Selektory atributů lze v jQuery použít stejně jako jakýkoli jiný selektor CSS. V JavaScriptu můžete použít selektory atributů s document.querySelector()a document.querySelectorAll().
Podívejte se na selektory atributů pera v JS a jQuery od CSS-Tricks (@ css-tricks) na CodePen.
Příbuzný
- třída
- ID
Více informací
- Skinny na voličích atributů
- Selektory atributů na MDN
- Selektory atributů ve specifikaci CS3 W3C
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Žádný | Žádný | Žádný | Žádný | 7+ | Žádný | Žádný |