Selektory

Jeśli masz tekst, który chcesz powiększyć i postawić na czerwono tylko wtedy, gdy jest to pierwszy akapit artykułu, jak to zrobić?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Używasz selektora arkusza CSS, aby znaleźć konkretny element i zastosować regułę arkusza CSS, tak jak w tym przykładzie.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS oferuje wiele opcji wyboru elementów i zastosowywania do nich reguł, od bardzo prostych do bardzo złożonych, aby pomóc w rozwiązywaniu takich sytuacji.

Elementy reguły CSS

Aby zrozumieć, jak działają selektory i jaką pełnią rolę w CSS, warto poznać części reguły CSS. Reguła CSS to blok kodu zawierający co najmniej 1 selektor i co najmniej 1 deklarację.

Obraz reguły CSS z selektorem .my-css-rule.

W tej regule CSS selektor to .my-css-rule, który znajduje na stronie wszystkie elementy z klasą my-css-rule. W nawiasach klamrowych znajdują się 3 deklaracje. Deklaracja to para właściwości i wartości, która stosuje style do elementów dopasowanych przez selektory. Reguła CSS może zawierać dowolną liczbę deklaracji i selektorów.

Selektory proste

Najprostsza grupa selektorów obejmuje elementy HTML oraz klasy, identyfikatory i inne atrybuty, które można dodać do tagu HTML.

Selektor uniwersalny

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Selektor uniwersalny, zwany też symbolem wieloznacznym, pasuje do dowolnego elementu.

* {
  color: hotpink;
}

Ta reguła powoduje, że każdy element HTML na stronie ma tekst w gorącym różu.

Selektor typu

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Selektor typu dopasowuje się bezpośrednio do elementu HTML.

section {
  padding: 2em;
}

Ta reguła powoduje, że każdy element <section> ma 2em padding ze wszystkich stron.

Selektor klasy

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Element HTML może mieć co najmniej 1 element zdefiniowany w atrybucie class. Selekcja klasy dopasowuje się do każdego elementu, do którego zastosowano tę klasę.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Każdy element, do którego zastosowano klasę, będzie podświetlony na czerwono:

.my-class {
  color: red;
}

Zwróć uwagę, że element . występuje tylko w CSS, a nie w HTML. Dzieje się tak, ponieważ znak . instruuje język CSS, aby dopasowywał elementy atrybutu klasy. Jest to typowy wzór w CSS, w którym do definiowania typów selektora służy znak specjalny lub zestaw znaków.

Element HTML z klasą .my-class będzie nadal pasował do powyższej reguły CSS, nawet jeśli ma kilka innych klas, np.

<div class="my-class another-class some-other-class"></div>

Dzieje się tak, ponieważ CSS szuka atrybutu class, który zawiera zdefiniowaną klasę, a nie dopasowuje się dokładnie do tej klasy.

Selektor identyfikatorów

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Element HTML z atrybutem id powinien być jedynym elementem na stronie z tą wartością identyfikatora. Elementy wybierasz za pomocą selektora identyfikatora w ten sposób:

#rad {
  border: 1px solid blue;
}

Ten kod CSS zastosowałby niebieską ramkę do elementu HTML, który ma atrybut id o wartości rad, w ten sposób:

<div id="rad"></div>

Podobnie jak w przypadku selektora klasy ., użyj znaku #, aby polecić CSS szukanie elementu pasującego do wartości id, która następuje po tym znaku.

Selektor atrybutów

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Za pomocą selektora atrybutów możesz wyszukiwać elementy, które mają określony atrybut HTML lub określoną wartość atrybutu HTML. Poproś CSS o wyszukiwanie atrybutów, otaczając selektor nawiasami kwadratowymi ([ ]).

[data-type='primary'] {
  color: red;
}

Ten kod CSS wyszukuje wszystkie elementy, które mają atrybut data-type o wartości primary, np.:

<div data-type="primary"></div>

Zamiast szukać konkretnej wartości atrybutu data-type, możesz też szukać elementów z tym atrybutem, niezależnie od jego wartości.

[data-type] {
  color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>

Oba te elementy <div> będą miały tekst w kolorze czerwonym.

Możesz używać selektorów atrybutów uwzględniających wielkość liter, dodając do selektora atrybutów operator s.

[data-type='primary' s] {
  color: red;
}

Oznacza to, że jeśli element HTML miałby wartość data-type Primary, zamiast primary, nie wyświetliłby czerwonego tekstu. Możesz też użyć operatora i, aby uzyskać efekt odwrotny, czyli ignorowanie wielkości liter.

Oprócz operatorów wielkości liter masz dostęp do operatorów, które pasują do części ciągów znaków w wartościach atrybutów.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
W tym pokazie operator „$” w naszym selektorze atrybutów pobiera typ pliku z atrybutu „href”. Dzięki temu możesz użyć prefiksu etykiety na podstawie typu pliku za pomocą pseudoelementu.

Selektory grupowania

Selektor nie musi pasować tylko do jednego elementu. Możesz pogrupować wiele selektorów, rozdzielając je przecinkami:

strong,
em,
.my-class,
[lang] {
  color: red;
}

W tym przykładzie zmiana koloru dotyczy zarówno elementów <strong>, jak i elementów <em>. Jest ona również rozszerzona o klasę o nazwie .my-class i element z atrybutem lang.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o prostych selektorach

* {}

Jakiego prostego selektora użyto w powyższym fragmencie kodu?

klasa
uniwersalny
Identyfikator
atrybut
div {}

Jakiego prostego selektora użyto w powyższym fragmencie kodu?

klasa
atrybut
typ
Identyfikator

Pseudoklasy i pseudoelementy

CSS udostępnia przydatne typy selektora, które skupiają się na określonym stanie platformy, na przykład na najechaniu kursorem na element, strukturach w elemencie lub częściach elementu.

Pseudoklasy

Elementy HTML mogą znajdować się w różnych stanach, albo dlatego, że użytkownik wchodzi z nimi w interakcję, albo dlatego, że jeden z ich elementów podrzędnych znajduje się w określonym stanie.

Użytkownik może na przykład najechać kursorem na element HTML lub element podrzędny. W takich sytuacjach użyj pseudoklasy :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Więcej informacji znajdziesz w module Pseudo-Classes.

Element pseudo

Pseudoelementy różnią się od pseudoklas, ponieważ zamiast reagować na stan platformy działają tak, jakby wstawiały nowy element za pomocą CSS. Pseudoelementy różnią się też od pseudoklas pod względem składni, ponieważ zamiast pojedynczego dwukropka (:) używamy podwójnego dwukropka (::).

.my-element::before {
  content: 'Prefix - ';
}

Podobnie jak w powyższym pokazie, w którym przed etykietą linku dodano typ pliku, możesz użyć pseudoelementu ::before, aby wstawić zawartość na początku elementu, lub pseudoelementu ::after, aby wstawić zawartość na końcu elementu.

Pseudoelementy nie ograniczają się jednak do wstawiania treści. Możesz też używać tych atrybutów do kierowania na konkretne części elementu. Załóżmy na przykład, że masz listę. Użyj ::marker, aby sformatować każdy punkt (lub numer) na liście.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Możesz też użyć ::selection, aby nadać styl treściom wyróżnionym przez użytkownika.

::selection {
  background: black;
  color: white;
}

Więcej informacji znajdziesz w module poświęconym pseudoelementom.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o pseudoselektorze

Ile dwukropków używają selektory pseudoelementów?

:
:::
::
p:hover {
  background: white;
  color: black;
}

Jakiego typu pseudoselektora użyto w powyższym fragmencie kodu?

Pseudoklasa
Element pseudo

Selektory złożone

Poznaliśmy już wiele selektorów, ale czasami potrzebujesz bardziej szczegółowej kontroli w kodzie CSS. Właśnie w takich sytuacjach przydają się złożone selektory.

Warto pamiętać, że chociaż te selektory dają nam więcej możliwości, możemy wybierać tylko elementy podrzędne. Nie możemy kierować reklam na elementy nadrzędne ani wybierać elementów nadrzędnych. Omówimy, czym jest kaskada i jak działa, w kolejnej lekcji.

Kombinatory

Kombinator znajduje się między 2 selektorami. Jeśli np. selektor to p > strong, kombinator to znak >. Selektory, które korzystają z tych kombinatorów, pomagają wybierać elementy na podstawie ich pozycji w dokumencie.

Kombinator potomków

Aby zrozumieć, jak działają kombinatory potomków, musisz najpierw poznać elementy nadrzędne i podrzędne.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Element nadrzędny to element <p>, który zawiera tekst. Wewnątrz elementu <p> znajduje się element <strong>, którego zawartość jest pogrubiona. Ponieważ znajduje się wewnątrz elementu <p>, jest elementem podrzędnym.

Kombinator potomków umożliwia kierowanie na element podrzędny. W tym przypadku spacje () służą do wskazywania przeglądarce elementów podrzędnych:

p strong {
  color: blue;
}

Ten fragment kodu wybiera wszystkie elementy <strong>, które są elementami podrzędnymi elementów <p>, i czyni je niebieskimi w drodze rekurencyjnej.

Ponieważ selekcja potomków jest rekurencyjna, do każdego elementu podrzędnego jest stosowany margines, co powoduje efekt stopniowania.

Efekt ten jest lepiej zobrazowany w powyższym przykładzie, w którym użyto selektora kombinatora .top div. Ta reguła CSS dodaje do elementów <div> wypełnienie po lewej stronie. Ponieważ kombinator jest rekurencyjny, wszystkie elementy <div> w elementach .top będą miały ten sam margines.

W tym demonstracyjnym panelu HTML możesz zobaczyć, że element .top ma kilka elementów podrzędnych <div>, które mają elementy podrzędne <div>.

następny element kombinatoryczny w dół,

Możesz wyszukać element, który bezpośrednio następuje po innym elemencie, używając w selektorze znaku +.

Aby dodać odstęp między elementami ułożonymi w wielokrotnym wierszu, użyj operatora następnego elementu nadrzędnego, aby dodać odstęp tylko, jeśli element jest elementem następnym elementu podrzędnego .top.

Możesz dodać marginesy do wszystkich elementów podrzędnych elementu .top, używając tego selektora:

.top * {
  margin-top: 1em;
}

Problem polega na tym, że wybierasz wszystkie elementy podrzędne elementu .top, więc ta reguła może tworzyć dodatkowe, niepotrzebne miejsce. Kombinator następnego elementu potomnego w połączeniu z uniwersalnym selektorem umożliwia nie tylko kontrolowanie, które elementy mają mieć odstęp, ale także zastosowanie odstępu do dowolnego elementu. Daje to pewną długoterminową elastyczność, niezależnie od tego, jakie elementy HTML znajdują się w sekcji .top.

Kombinator następnego rodzeństwa

Następujący operator jest bardzo podobny do selektora następnego elementu siostrzanego. Zamiast znaku + użyj znaku ~. Różnica polega na tym, że element musi po prostu następować po innym elemencie z tym samym elementem nadrzędnym, a nie być kolejnym elementem z tym samym elementem nadrzędnym.

Aby utworzyć czysty element przełącznika CSS, użyj kolejnego selektora wraz z pseudoklasą „:checked”.

Ten kolejny kombinator zapewnia nieco mniejszą sztywność, co jest przydatne w kontekstach takich jak powyższy przykład, w którym zmieniamy kolor niestandardowego przełącznika, gdy powiązane z nim pole wyboru ma stan :checked.

Kombinator podrzędny

Kombinator podrzędny (zwany też bezpośrednim potomkiem) daje większą kontrolę nad rekurencją, która występuje w przypadku selektorów kombinatora. Użycie znaku > powoduje, że selektor kombinator zastosuje się tylko do bezpośrednich elementów podrzędnych.

Rozważ poprzedni przykład selektora następnego elementu siostrzanego. Przestrzeń jest dodawana do każdego elementu następnego brata lub siostry, ale jeśli jeden z tych elementów ma też elementy następnego brata lub siostry jako podrzędne, może to spowodować niepożądane dodatkowe odstępy.

Aby rozwiązać ten problem, zmień selektor następnego elementu podrzędnego, aby uwzględnić w nim element podrzędny: > * + *. Reguła będzie teraz tylko stosowana do bezpośrednich podrzędnych elementów .top.

Selektory złożone

Możesz łączyć selektory, aby zwiększyć specyficzność i czytelność. Aby na przykład kierować się na elementy <a>, które mają też klasę .my-class, napisz:

a.my-class {
  color: red;
}

Nie spowoduje to zastosowania czerwonego koloru do wszystkich linków. Czerwony kolor zostanie zastosowany tylko do elementu .my-class, if znajduje się on w elemencie <a>. Więcej informacji znajdziesz w module dotyczącym specyfikiczności.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o kompleksowych selektorach

Który z tych symboli nie jest selektorem kombinatorów?

.
÷
*
>
+
section.awesome {
  border: 1px solid hotpink;
}

Wyżej podany selektor to przykład…

Terminator
Kombinator
Selektor kompleksu

Zasoby