Постоји много начина на које можете да изаберете елементе у ЦСС-у. Најосновнији избор је према називу ознаке, на пример p ( ). Готово све специфичније од селектора ознака користи атрибуте - classи IDоба одабиру на тим атрибутима на ХТМЛ елементима. Али classи IDнису једини атрибути које програмери могу да одаберу. Као селекторе можемо користити било који атрибут елемента.
Избор атрибута има посебну синтаксу. Ево примера:
a(href="https://css-tricks.com") ( color: #E18728; )То је бирач тачног подударања који ће одабрати само везе са тачном hrefвредношћу атрибута „хттпс://цсс-трицкс.цом“.
Седам различитих врста
Бирачи атрибута су подразумевано осетљиви на велика и мала слова (погледајте доле подударање без великих и малих слова) и написани су у заградама ().
Постоји седам различитих врста подударања које можете пронаћи помоћу бирача атрибута, а синтакса је различита за свако. Сваки од сложенијих селектора атрибута надовезује се на синтаксу селектора тачног подударања - сви почињу именом атрибута и завршавају се знаком једнакости праћеним вредностима атрибута, обично у наводницима. Оно што иде између имена атрибута и знака једнакости је оно што прави разлику међу селекторима.
(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 */ )Вредност садржи: вредност атрибута садржи појам као једину вредност, вредност на листи вредности или као део друге вредности. Да бисте користили овај бирач, додајте звездицу (*) пре знака једнакости. На пример, img(alt*="art")изабраће слике са алт текстом „апстрактна уметност“ и „спортиста који започиње нови спорт“, јер је вредност „уметност“ у речи „започињање“.
Вредност је на листи раздвојеној размаком: вредност је или једина вредност атрибута, или је цела вредност у скупу вредности одвојених размаком. За разлику од селектора „садржи“, овај селектор неће тражити вредност као фрагмент речи. Да бисте користили овај бирач, додајте тилду (~) пре знака једнакости. На пример, img(alt~="art")изабраће слике са алт текстом „апстрактна уметност“ и „уметничка представа“, али не и „спортиста који започиње нови спорт“ (што би изабрао селектор „садржи“).
Вредност почиње са: вредност атрибута почиње са изабраним појмом. Да бисте користили овај бирач, додајте знак (^) пре знака једнакости. Не заборавите, осетљивост на велика и мала слова је битна. На пример, имг (алт = ”арт”) ће одабрати слике са алт текстом „арт схов“ и „уметнички образац“, али не и слику са алт текстом „Артхур Миллер“, јер „Артхур“ почиње великим словом .
Вредност је прва на листи одвојених цртицама: Овај бирач је врло сличан бирачу „почиње са“. Овде се селектор подудара са вредношћу која је или једина вредност или је прва на листи вредности одвојених цртицама. Да бисте користили овај селектор, додајте знак луке (|) пре знака једнакости. На пример, li(data-years|="1900")изабраће ставке листе data-yearsвредности „1900-2000“, али не и ставку листе data-yearsвредности „1800-1900“.
Вредност се завршава са: вредност атрибута завршава се изабраним појмом. Да бисте користили овај бирач, додајте знак долара ($) пре знака једнакости. На пример, a(href$="pdf")бира сваку везу која се завршава с .пдф.
Напомена о наводницима: У неким околностима можете ићи без наводника око вредности, али правила за одабир без наводника нису доследна у различитим прегледачима. Цитати увек раде, па ако се држите њиховог коришћења, можете бити сигурни да ће ваш селектор радити.
Погледајте бираче атрибута оловке од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Забавна чињеница: вредности се третирају као низови, тако да не морате да правите необично бекство знакова да би се подударали, као што би било када бисте користили необичне знакове у бирачу класе или ИД-а.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Подударање без великих и малих слова
Селектори атрибута који не разликују мала и велика слова део су спецификације ЦСС Радне групе за ниво 4. Као што је горе поменуто, низови вредности атрибута подразумевано разликују велика и мала слова, али се могу променити у велика и мала слова додавањем iнепосредно испред заграде:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Подударање без великих и малих слова могло би бити заиста згодно за циљање атрибута који садрже непредвидив текст који је написао човек. На пример, претпоставимо да сте обликовали облачић за говор у апликацији за ћаскање и желели сте да додате „руку која маше“ свим порукама са текстом „здраво“ у неком облику. То бисте могли да урадите само са ЦСС-ом, користећи подударање без великих и малих слова да бисте ухватили све могуће варијације:
Погледајте ЦСС атрибут који не осетјује на оловке и одговара ЦСС-триковима (@ цсс-трикови) на ЦодеПен-у.
Комбинујући их
Селектор атрибута можете комбиновати са другим селекторима, попут ознаке, класе или ИД-а.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Или чак комбиновати више селектора атрибута. Овај пример бира слике са алт текст који укључује реч "лице" као једини вредности или вредности у простору одвојеном листу, и на srcвредност која обухвата вредности "Лорем":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Погледајте комбиноване атрибуте оловке и избор само атрибута од стране ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Бирачи атрибута у ЈаваСцрипт-у и јКуери-ју
Селектори атрибута могу се користити у јКуерију баш као и било који други ЦСС селектор. У ЈаваСцрипт-у можете да користите селекторе атрибута са document.querySelector()и document.querySelectorAll().
Погледајте бираче атрибута оловке у ЈС и јКуери би ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Повезан
- класа
- ИД
Више информација
- Мршави на селекторима атрибута
- Селектори атрибута на МДН
- Селектори атрибута у спецификацији В3Ц ЦСС
Подршка прегледача
| Хром | Сафари | Фирефок | Опера | ИЕ | Андроид | иОС |
|---|---|---|---|---|---|---|
| Било који | Било који | Било који | Било који | 7+ | Било који | Било који |