Existuje veľa spôsobov, ako môžete vybrať prvky v CSS. Najzákladnejší výber je podľa názvu značky, páči sa mi p ( ). Takmer čokoľvek konkrétnejšie ako selektor značiek používa atribúty - classa IDoba tieto atribúty vyberajú na prvkoch HTML. Ale classaj IDnie sú len atribúty vývojári môžu vybrať. Ako selektory môžeme použiť ktorýkoľvek z atribútov prvku.
Výber atribútu má špeciálnu syntax. Tu je príklad:
a(href="https://css-tricks.com") ( color: #E18728; )Jedná sa o selektor presnej zhody, ktorý vyberie iba odkazy s presnou hrefhodnotou atribútu „https://css-tricks.com“.
Sedem rôznych typov
Pri selektoroch atribútov sa v predvolenom nastavení rozlišujú veľké a malé písmená (pozri zhoda s malými a veľkými písmenami nižšie) a sú uvedené v zátvorkách ().
Existuje sedem rôznych typov zhôd, ktoré môžete nájsť pomocou selektora atribútov, a ich syntax je pre každú iná. Každý z komplexnejších selektorov atribútov vychádza zo syntaxe selektora presnej zhody - všetky sa začínajú názvom atribútu a končia sa znamienkom rovnosti, za ktorým nasledujú hodnoty atribútov, zvyčajne v úvodzovkách. Medzi menom atribútu a znamienkom rovná sa je rozdiel medzi selektormi.
(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 atribútu obsahuje výraz ako jedinú hodnotu, hodnotu v zozname hodnôt alebo ako súčasť inej hodnoty. Ak chcete použiť tento selektor, pridajte pred znamienko rovnosti hviezdičku (*). Napríklad img(alt*="art")vyberie obrázky s alternatívnym textom „abstraktné umenie“ a „športovec začínajúci nový šport“, pretože hodnota „umenie“ je v slove „začínajúci“.
Hodnota je v zozname oddelenom medzerami: value je buď jediná hodnota atribútu, alebo celá hodnota v množine hodnôt oddelených medzerami. Na rozdiel od selektora „obsahuje“ nebude tento selektor hľadať hodnotu ako fragment slova. Ak chcete použiť tento selektor, pridajte pred znak rovnosti vlnovku (~). Napríklad img(alt~="art")vyberie obrázky s alternatívnym textom „abstraktné umenie“ a „umelecká šou“, ale nie „športovec začínajúci nový šport“ (ktorý by vybral selektor „obsahuje“).
Hodnota začína: hodnota atribútu začína vybraným výrazom. Ak chcete použiť tento selektor, pridajte pred znamienko rovnosti kurzor (^). Nezabudnite, záleží na veľkosti písmen. Napríklad img (alt = „art“) vyberie obrázky s alternatívnym textom „umelecká show“ a „umelecký vzor“, ale nebude to obrázok s alternatívnym textom „Arthur Miller“, pretože „Arthur“ začína veľkým písmenom .
Hodnota je na prvom mieste v zozname oddelenom pomlčkami: Tento selektor je veľmi podobný selektoru „začína na“. Tu selektor zodpovedá hodnote, ktorá je buď jedinou hodnotou, alebo je prvou v zozname hodnôt oddelených pomlčkou. Ak chcete použiť tento selektor, pridajte znak znamienka (|) pred znamienko rovnosti. Napríklad li(data-years|="1900")vyberie položky zoznamu s data-yearshodnotou „1900-2000“, nie však položku zoznamu s data-yearshodnotou „1800-1900“.
Hodnota končí: hodnota atribútu končí vybraným výrazom. Ak chcete použiť tento selektor, pred znak rovnosti pridajte znak dolára ($). Napríklad a(href$="pdf")vyberie každý odkaz, ktorý končí na .pdf.
Poznámka o úvodzovkách: Za určitých okolností môžete obísť hodnotu bez úvodzoviek, ale pravidlá pre výber bez úvodzoviek sú nekonzistentné medzi prehliadačmi. Citáty vždy fungujú, takže ak sa ich budete držať, môžete si byť istí, že výber bude fungovať.
Prečítajte si Selektory atribútov pera od CSS-Tricks (@ css-tricks) na CodePen.
Zábavný fakt: s hodnotami sa zaobchádza ako s reťazcami, takže nemusíte robiť nijaké ozdobné úniky znakov, aby sa tieto znaky zhodovali, ako by ste to urobili, keby ste v selektore triedy alebo ID použili neobvyklé znaky.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Zhoda malých a veľkých písmen
Selektory atribútov nerozlišujú veľké a malé písmená sú súčasťou špecifikácie Selektory 4. úrovne pracovnej skupiny CSS. Ako už bolo spomenuté vyššie, reťazce hodnoty atribútov predvolene rozlišujú veľké a malé písmená, ale je možné ich zmeniť na malé a veľké písmená pridaním itesne pred koncovú zátvorku:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Priraďovanie malých a veľkých písmen by mohlo byť užitočné pri zacielení na atribúty, ktoré obsahujú nepredvídateľný text napísaný človekom. Predpokladajme napríklad, že ste v aplikácii na rozhovor vytvorili štýl rečovej bubliny a chceli by ste ku všetkým správam pridať „mávnutie rukou“ s textom „ahoj“ v určitej podobe. Mohli by ste tak urobiť iba s CSS a pomocou porovnávača, v ktorom sa nerozlišujú malé a veľké písmená, zachytiť všetky možné variácie:
Pozrite si porovnávanie atribútov CSS necitlivých na perá pomocou CSS-Tricks (@ css-tricks) na CodePen.
Ich kombinovanie
Selektor atribútov môžete kombinovať s inými selektormi, ako sú značka, trieda alebo ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Alebo dokonca kombinujte viac selektorov atribútov. Tento príklad vyberie obrazy s alternatívnym textom, ktorý obsahuje slovo "osoby" ako jedinú hodnotu, alebo hodnotu v priestore zozname oddelené, a na srchodnotu, ktorá obsahuje hodnotu "Lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Prezrite si kombinácie atribútov pera a výber iba atribútov pomocou CSS-trikov (@ css-tricks) na CodePen.
Selektory atribútov v jazykoch JavaScript a jQuery
Selektory atribútov možno v jQuery použiť rovnako ako akýkoľvek iný selektor CSS. V JavaScripte môžete použiť selektory atribútov pomocou document.querySelector()a document.querySelectorAll().
Prezrite si selektory atribútov pera v JS a jQuery od CSS-Tricks (@ css-tricks) na CodePen.
Súvisiace
- trieda
- ID
Viac informácií
- Skinny na selektoroch atribútov
- Selektory atribútov na MDN
- Selektory atribútov v špecifikácii W3C CSS
Podpora prehľadávača
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| akýkoľvek | akýkoľvek | akýkoľvek | akýkoľvek | 7+ | akýkoľvek | akýkoľvek |