Istnieje wiele sposobów wybierania elementów w CSS. Najbardziej podstawowym wyborem jest nazwa tagu, na przykład p ( ). Prawie wszystko bardziej szczegółowe niż selektor znaczników używa atrybutów - classi IDoba wybierają te atrybuty w elementach HTML. Ale classi IDnie są jedynymi atrybutami, które mogą wybrać programiści. Jako selektorów możemy użyć dowolnego atrybutu elementu.
Wybór atrybutu ma specjalną składnię. Oto przykład:
a(href="https://css-tricks.com") ( color: #E18728; )To jest selektor dopasowania ścisłego , który wybiera tylko linki z dokładną hrefwartością atrybutu „https://css-tricks.com”.
Siedem różnych typów
Selektory atrybutów domyślnie uwzględniają wielkość liter (zobacz poniżej dopasowywanie bez uwzględniania wielkości liter) i są zapisane w nawiasach ().
Istnieje siedem różnych typów dopasowań, które można znaleźć za pomocą selektora atrybutu, a składnia każdego z nich jest inna. Każdy z bardziej złożonych selektorów atrybutów opiera się na składni selektora dokładnego dopasowania - wszystkie zaczynają się od nazwy atrybutu i kończą znakiem równości, po którym następują wartości atrybutu, zwykle w cudzysłowie. To, co znajduje się między nazwą atrybutu a znakiem równości, stanowi różnicę między selektorami.
(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 */ )Wartość zawiera: wartość atrybutu zawiera termin jako jedyną wartość, wartość na liście wartości lub jako część innej wartości. Aby użyć tego selektora, dodaj gwiazdkę (*) przed znakiem równości. Na przykład img(alt*="art")wybierze obrazy z tekstem alternatywnym „sztuka abstrakcyjna” i „sportowiec rozpoczynający nowy sport”, ponieważ wartość „sztuka” znajduje się w słowie „rozpoczęcie”.
Wartość znajduje się na liście oddzielonej spacjami: wartość jest jedyną wartością atrybutu lub jest całą wartością w zestawie wartości oddzielonych spacjami. W przeciwieństwie do selektora „zawiera”, selektor ten nie będzie szukał wartości jako fragmentu słowa. Aby użyć tego selektora, dodaj tyldę (~) przed znakiem równości. Na przykład, img(alt~="art")wybierze obrazy z tekstem alternatywnym „sztuka abstrakcyjna” i „pokaz sztuki”, ale nie „sportowiec rozpoczynający nowy sport” (które wybierze selektor „zawiera”).
Wartość zaczyna się od: wartość atrybutu zaczyna się od wybranego terminu. Aby użyć tego selektora, dodaj daszek (^) przed znakiem równości. Nie zapominaj, że rozróżnianie wielkości liter ma znaczenie. Na przykład img (alt = ”sztuka”) wybierze obrazy z tekstem alternatywnym „pokaz sztuki” i „wzorzec artystyczny”, ale nie obraz z tekstem alternatywnym „Arthur Miller”, ponieważ „Arthur” zaczyna się wielką literą .
Wartość jest pierwsza na liście oddzielonej myślnikami: ten selektor jest bardzo podobny do selektora „zaczyna się od”. W tym przypadku selektor dopasowuje wartość, która jest jedyną wartością lub pierwszą wartością na liście wartości oddzielonych myślnikami. Aby użyć tego selektora, dodaj pionową kreskę (|) przed znakiem równości. Na przykład li(data-years|="1900")wybierze elementy listy o data-yearswartości „1900–2000”, ale nie elementy listy o data-yearswartości „1800–1900”.
Wartość kończy się na: wartość atrybutu kończy się wybranym terminem. Aby użyć tego selektora, dodaj znak dolara ($) przed znakiem równości. Na przykład a(href$="pdf")wybiera każdy link kończący się na .pdf.
Uwaga dotycząca cudzysłowów: w niektórych okolicznościach można obejść wartość bez cudzysłowów, ale zasady wyboru bez cudzysłowów są niespójne w różnych przeglądarkach. Cytaty zawsze działają, więc jeśli będziesz ich używać, możesz mieć pewność, że Twój selektor zadziała.
Zobacz selektory atrybutów pióra według CSS-Tricks (@ css-tricks) w CodePen.
Ciekawostka: wartości są traktowane jako ciągi znaków, więc nie musisz wykonywać żadnych wymyślnych ucieczek znaków, aby dopasować je, tak jak w przypadku użycia nietypowych znaków w selektorze klasy lub identyfikatora.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Dopasowywanie bez rozróżniania wielkości liter
Selektory atrybutów bez rozróżniania wielkości liter są częścią specyfikacji selektorów poziomu 4 grupy roboczej CSS. Jak wspomniano powyżej, w ciągach wartości atrybutów jest domyślnie rozróżniana wielkość liter, ale można je zmienić tak, aby nie uwzględniały wielkości liter, dodając ituż przed nawiasem zamykającym:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )Dopasowywanie bez rozróżniania wielkości liter może być bardzo przydatne do kierowania na atrybuty zawierające nieprzewidywalny tekst napisany przez człowieka. Na przykład załóżmy, że stylizujesz dymek w aplikacji do czatu i chcesz dodać „machającą ręką” do każdej wiadomości z tekstem „cześć” w jakiejś formie. Możesz to zrobić tylko za pomocą CSS, używając dopasowywania bez rozróżniania wielkości liter, aby złapać wszystkie możliwe odmiany:
Zobacz dopasowanie atrybutów CSS bez uwzględniania wielkości liter pióra przez CSS-Tricks (@ css-tricks) w CodePen.
Łącząc je
Możesz łączyć selektor atrybutu z innymi selektorami, takimi jak tag, klasa lub identyfikator.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )Lub nawet połącz wiele selektorów atrybutów. Ten przykład wybiera obrazy z tekstem alternatywnym, który zawiera słowo „osoba” jako jedyną wartość lub wartość na liście oddzielonej spacjami, a także srcwartość zawierającą wartość „lorem”:
img(alt~="person")(src*="lorem") ( /* style rules here */ )Zobacz atrybuty połączone pióra i wybór tylko atrybutów przez CSS-Tricks (@ css-tricks) w CodePen.
Selektory atrybutów w JavaScript i jQuery
Selektory atrybutów mogą być używane w jQuery, tak jak każdy inny selektor CSS. W JavaScript możesz używać selektorów atrybutów z document.querySelector()i document.querySelectorAll().
Zobacz selektory atrybutów pióra w JS i jQuery autorstwa CSS-Tricks (@ css-tricks) w CodePen.
Związane z
- klasa
- ID
Więcej informacji
- Chudy na selektorach atrybutów
- Selektory atrybutów w MDN
- Selektory atrybutów w specyfikacji W3C CSS
Wsparcie przeglądarki
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | Każdy | Każdy | Każdy | 7+ | Każdy | Każdy |