Selektory

Podcast o CSS – 002: selektory

Jak to zrobić, jeżeli jest tekst, który ma być większy i czerwony tylko w pierwszym akapicie artykułu?

<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>

Aby znaleźć ten element, użyj selektora arkusza CSS i zastosuj taką regułę CSS.

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

CSS daje wiele opcji do wybierania elementów i stosowania do nich reguł – od bardzo prostych po bardzo złożone, które pomagają w takich sytuacjach.

Części reguły CSS

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

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ść i wartość, która stosuje style do elementów dopasowanych przez selektory. Reguła CSS może mieć dowolną liczbę deklaracji i selektorów.

Proste selektory

Najprostsza grupa selektorów dotyczy elementów HTML oraz klas, identyfikatorów i innych atrybutów, które można dodać do tagu HTML.

Selektor uniwersalny

Selektor uniwersalny – określany też jako symbol wieloznaczny – pasuje do dowolnego elementu.

* {
  color: hotpink;
}

Ta reguła powoduje, że w każdym elemencie HTML na stronie występuje tekst „hotpink”.

Wybór typu

Selektor typu odpowiada bezpośrednio elementowi HTML.

section {
  padding: 2em;
}

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

Selektor zajęć

Element HTML może mieć zdefiniowany jeden lub więcej elementów w atrybucie class. Selektor klasy pasuje do każdego elementu, do którego zastosowano daną klasę.

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

Każdy element, do którego zastosowano klasę, zostanie oznaczony kolorem czerwonym:

.my-class {
  color: red;
}

Zwróć uwagę, że dyrektywa . występuje tylko w kodzie CSS, a nie w kodzie HTML. Dzieje się tak, ponieważ znak . instruuje język CSS, aby pasował do elementów atrybutów klasy. Jest to typowy wzorzec CSS, w którym do definiowania typów selektorów używany jest znak specjalny, czyli zbiór znaków.

Element HTML z klasą .my-class zostanie dopasowany do powyższej reguły CSS, nawet jeśli ma kilka innych klas, na przykład:

<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 dokładnie do niej pasuje.

Selektor identyfikatora

Element HTML z atrybutem id powinien być jedynym elementem na stronie o danej wartości identyfikatora. Wybierasz elementy za pomocą selektora identyfikatora w taki sposób:

#rad {
  border: 1px solid blue;
}

Ten kod CSS zastosuje niebieskie obramowanie do elementu HTML, który ma id o wartości rad, na przykład:

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

Podobnie jak w przypadku selektora klasy . użyj znaku #, aby nakazać CSSowi odszukanie elementu pasującego do występującego po nim elementu id.

Selektor atrybutu

Elementy, które mają określony atrybut HTML lub określoną wartość atrybutu HTML, możesz znaleźć za pomocą selektora atrybutów. Instrukcje dotyczące wyszukiwania atrybutów znajdziesz w kodzie CSS, umieszczając selektor w nawias kwadratowy ([ ]).

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

Ten arkusz CSS szuka wszystkich elementów, które mają atrybut data-type o wartości primary, na przykład:

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

Zamiast szukać konkretnej wartości data-type, możesz też wyszukiwać elementy z 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 czerwony tekst.

Aby użyć selektorów atrybutów z uwzględnieniem wielkości liter, dodaj do selektora atrybutów operator s.

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

Oznacza to, że jeśli element HTML miał wartość data-type o wartości Primary, a nie primary, nie otrzymał czerwonego tekstu. Możesz wykonać odwrotną operację – nie rozróżniać wielkości liter – używając operatora i.

Wraz z operatorami wielkości liter masz dostęp do operatorów, które pasują do fragmentów ciągó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;
}

Selektory grupowania

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

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

Ten przykład rozszerza zmianę koloru zarówno na elementy <strong>, jak i elementy <em>. Jest on też rozszerzony do klasy o nazwie .my-class i elementu z atrybutem lang.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o prostych selektorach

* {}

div {}

Pseudoklasy i pseudoelementy

CSS udostępnia przydatne typy selektorów, które koncentrują się na konkretnym stanie platformy, np. po najechaniu kursorem na element, strukturze wewnątrz elementu lub jego części.

Pseudoklasy

Elementy HTML pojawiają się w różnych stanach – na przykład dlatego, że wchodzą z nimi w interakcję lub że jeden z elementów podrzędnych jest w określonym stanie.

Na przykład użytkownik może najechać kursorem myszy 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 pseudozajęć.

Pseudoelement

Pseudoelementy różnią się od pseudoklasy tym, że zamiast reagować na stan platformy, działają tak, jakby wstawiały nowy element za pomocą CSS. Pseudoelementy różnią się też składnią od pseudoklasy, ponieważ zamiast jednego dwukropka (:) stosujemy podwójny dwukropek (::).

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

Tak jak w powyższej prezentacji, w której do etykiety linku dodano typ pliku, możesz użyć pseudoelementu ::before, aby wstawić treść na początku elementu, lub pseudoelementu ::after, aby wstawić treść na końcu elementu.

Pseudoelementy nie są jednak ograniczone do wstawiania treści. Możesz też używać ich do kierowania reklam na określone części elementu. Załóżmy, że masz listę. Użyj ::marker, aby określić styl każdego punktu (lub numeru) na liście

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

Możesz też użyć polecenia ::selection, aby określić styl treści wyróżnionej przez użytkownika.

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

Więcej informacji znajdziesz w module dotyczącym pseudoelementów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o pseudoselektorach

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

Złożone selektory

Widać już wiele selektorów, ale czasami możesz potrzebować bardziej precyzyjnej kontroli w stosunku do CSS. Dlatego pomocne są złożone selektory.

Pamiętaj, że chociaż wymienione poniżej selektory dają nam więcej możliwości, możemy tylko skierować w dół, wybierając elementy podrzędne. Nie można kierować w górę i wybrać elementu nadrzędnego. Czym jest kaskada i jak działa w kolejnej lekcji.

Kombinatory

Kombinator to element znajdujący się między 2 selektorami. Jeśli np. selektor to p > strong, kombinatorem jest znak >. Selektory, które używają tych kombinatorów, pomagają wybierać elementy na podstawie ich pozycji w dokumencie.

Kombinator podrzędny

Aby zrozumieć kombinatory podrzędne, musisz najpierw poznać elementy nadrzędne i podrzędne.

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

Elementem nadrzędnym jest element <p> zawierający tekst. Wewnątrz tego elementu <p> znajduje się element <strong>, który sprawia, że jego treść jest pogrubiona. Jest wewnątrz elementu <p>, dlatego jest elementem podrzędnym.

Kombinator podrzędny umożliwia kierowanie reklam na element podrzędny. Powoduje to użycie spacji (), aby poinformować przeglądarkę, że ma szukać elementów podrzędnych:

p strong {
  color: blue;
}

Ten fragment kodu wybiera wszystkie elementy <strong>, które są tylko elementami podrzędnymi elementów <p>, i zmieniają kolor rekurencyjny na niebieski.

Ten efekt można lepiej zwizualizować w przykładzie powyżej, używając selektora kombinatora .top div. Ta reguła CSS dodaje lewe dopełnienie do tych elementów <div>. Kombinator jest rekurencyjny, dlatego do wszystkich elementów <div> w elemencie .top będzie stosowane to samo dopełnienie.

Przyjrzyj się panelowi HTML w tej wersji demonstracyjnej, aby zobaczyć, w jaki sposób element .top ma kilka elementów podrzędnych <div>, które same zawierają elementy podrzędne <div>.

Następny kombinator elementów równorzędnych

Aby znaleźć element, który występuje tuż po innym, użyj znaku + w selektorze.

Aby dodać odstęp między skumulowanymi elementami równorzędnymi, użyj następnego kombinatora elementów równorzędnych, tylko wtedy, gdy element jest następnym elementem równorzędnym elementu podrzędnego elementu .top.

Możesz dodać margines do wszystkich elementów podrzędnych elementu .top, korzystając z tego selektora:

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

Problem polega na tym, że wybierasz każdy element podrzędny elementu .top, więc ta reguła może tworzyć dodatkowe, niepotrzebne miejsce. Następny kombinator bliźniaczy w połączeniu z selektorem uniwersalnym pozwala nie tylko kontrolować, które elementy otrzymają spację, ale też zastosować ją do dowolnego elementu. Zapewnia to długoterminową elastyczność niezależnie od tego, jakie elementy HTML znajdują się w .top.

Kolejna – kombinator równorzędne

Kolejny kombinator jest bardzo podobny do kolejnego selektora równorzędnego. Zamiast znaku + użyj jednak znaku ~. Różni się to tym, że element musi następować po innym elemencie z tym samym elementem nadrzędnym, a nie jako kolejny element z tym samym elementem nadrzędnym.

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

Kombinator podrzędny

Kombinator podrzędny (nazywany też bezpośrednim elementem podrzędnym) zapewnia większą kontrolę nad rekurencją udostępnianą z selektorów kombinatorów. Użycie znaku > ogranicza selektor kombinatora tak, aby był stosowany tylko do kierowania elementów podrzędnych.

Przeanalizuj poprzedni przykład selektora równorzędnego. Spacja jest dodawana do kolejnych elementów równorzędnych, ale jeśli któryś z nich ma też w hierarchii kolejne elementy, mogą pojawić się niepożądane, dodatkowe odstępy.

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

Selektory złożone

Selektory można łączyć ze sobą, aby zwiększyć precyzję i czytelność. Aby np. kierować reklamy na elementy <a>, które też mają klasę .my-class, wpisz ten kod:

a.my-class {
  color: red;
}

Kolor czerwony nie zostanie zastosowany do wszystkich linków, a czerwony zostanie zastosowany tylko do elementu .my-class, if znajdował się on w elemencie <a>. Więcej informacji na ten temat znajdziesz w module szczegółowości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o złożonych selektorach

section.awesome {
  border: 1px solid hotpink;
}

Zasoby

• Informacje o selektorach CSS
• Interaktywna gra w selektory
• Odniesienie do pseudoklas i pseudoelementów
• Narzędzie, które przekształca selektory CSS w proste wyjaśnienia w języku angielskim