Selektory

Podcast CSS – 002: selektory

Jeśli jakiś tekst ma być większy i czerwony, tylko jeśli 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>

Za pomocą selektora arkusza CSS możesz znaleźć konkretny element i zastosować regułę CSS w podobny sposób.

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

CSS daje wiele opcji wyboru elementów i stosowania do nich reguł, od bardzo prostych po bardzo złożone. które pomagają rozwiązywać takie sytuacje.

Elementy reguły CSS

Aby zrozumieć, jak działają selektory i ich rolę w CSS, ważne jest, by znać elementy reguły CSS. Reguła CSS to blok kodu, zawierające co najmniej 1 selektor i co najmniej 1 deklarację.

Obraz przedstawiający regułę 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 są 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 mieć dowolną liczbę deklaracji i selektorów.

Proste selektory

Najprostsza grupa selektorów kieruje reklamy na elementy HTML plus klas, identyfikatorów i innych atrybutów, które można dodać do tagu HTML.

Selektor uniwersalny

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Selektor uniwersalny – nazywany też symbolem wieloznacznym – pasuje do dowolnego elementu.

* {
  color: hotpink;
}

Ta reguła powoduje, że w każdym elemencie HTML na stronie występuje tekst hotróżowy.

Wybór typu

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

selektora typu, pasuje bezpośrednio do elementu HTML.

section {
  padding: 2em;
}

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

Selektor zajęć

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

W atrybucie class element HTML może mieć zdefiniowany co najmniej 1 element. selektor zajęć pasuje do dowolnego 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 miał czerwony kolor:

.my-class {
  color: red;
}

Zwróć uwagę, że . jest obecny tylko w kodzie CSS, a nie w kodzie HTML. Dzieje się tak, ponieważ znak . instruuje język CSS, aby dopasować elementy atrybutu klasy. Jest to typowy wzorzec w kodzie CSS, gdzie znak specjalny lub zestawu znaków, służy do określania typów selektorów.

Element HTML, który ma klasę .my-class, będzie nadal dopasowywany do powyższej reguły CSS, nawet jeśli ma też kilka innych klas, takich jak ta:

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

Dzieje się tak, ponieważ CSS szuka atrybutu class, który zawiera zdefiniowaną klasę, zamiast dokładnie dopasowywać tę klasę.

Selektor identyfikatorów

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 1.

Źródło

Element HTML z atrybutem id powinien być jedynym elementem na stronie o takiej wartości identyfikatora. Elementy wybrane za pomocą Selektor identyfikatora podobny do tego:

#rad {
  border: 1px solid blue;
}

Ten kod CSS zastosuje niebieskie obramowanie do elementu HTML z wartością id o wartości rad w następujący sposób:

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

Podobnie jak w selektorze klasy ., użyj znaku #, aby wskazać CSS, aby znalazł element pasujący do znaku id, który znajduje się za nim.

Selektor atrybutów

Obsługa przeglądarek

  • Chrome: 1.
  • Krawędź: 12.
  • Firefox: 1.
  • Safari: 3.

Źródło

Możesz poszukać elementów, które mają określony atrybut HTML, lub mają określoną wartość atrybutu HTML, za pomocą selektora atrybutów. Poleć CSS, aby szukał atrybutów. W tym celu umieść selektor w nawiasach kwadratowych ([ ]).

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

Ten kod CSS wyszukuje wszystkie elementy z atrybutem data-type o wartości primary, na przykład:

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

Zamiast szukać konkretnej wartości 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 czerwony tekst.

Możesz użyć selektorów atrybutów z rozróżnianiem wielkości liter dodając operator s do selektora atrybutów.

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

Oznacza to, że jeśli element HTML miał wartość data-type o wartości Primary, zamiast primary, nie otrzyma czerwonego tekstu. Możesz też zrobić odwrotną operację – bez uwzględniania wielkości liter. W tym celu użyj operatora i.

Oprócz operatorów Cases, masz dostęp do operatorów, które pasują do fragmentów ciągów znaków wewnątrz wartości 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 tej demonstracji operator „$” w selektorze atrybutów pobiera typ pliku z atrybutu „href”. Dzięki temu możliwe jest dodanie na podstawie danego typu pliku prefiksu etykiety za pomocą pseudoelementu.

Selektory grupowania

Selektor nie musi pasować tylko do jednego elementu. Większa liczba selektorów możesz zgrupować, rozdzielając je przecinkami:

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

W tym przykładzie zmiana koloru obejmuje zarówno elementy <strong>, jak i <em>. Została też rozszerzona do klasy o nazwie .my-class i elementu z atrybutem lang.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o prostych selektorach

* {}

Jakiego prostego selektora użyto w tym fragmencie kodu?

atrybut
[] są używane na potrzeby prostych selektorów atrybutów.
Identyfikator
# są używane w przypadku prostych selektorów identyfikatora.
uniwersalny
* to uniwersalny selektor prosty.
klasa
Obiekt . jest używany w przypadku prostych selektorów class.
 
div {}

Jakiego prostego selektora użyto w tym fragmencie kodu?

klasa
. jest używany w przypadku prostych selektorów class.
typ
Nazwa element jest używana w prostych selektorach type.
atrybut
Nawiasy kwadratowe [] są używane w prostych selektorach atrybutów.
Identyfikator
W przypadku prostych selektorów identyfikator używany jest obiekt #.

Pseudoklasy i pseudoelementy

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

Pseudoklasy

Elementy HTML znajdują się w różnych stanach, ponieważ wchodzą w interakcję z nimi, lub jeden z jego 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 takim przypadku należy użyć 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 pseudoklas.

Pseudoelement

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

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

Jak w przykładzie powyżej, do etykiety linku dodano typ pliku, za pomocą pseudoelementu ::before możesz wstawić treść na początku elementu, lub pseudoelementu ::after, aby wstawić treść na końcu elementu.

Pseudoelementy nie ograniczają się jednak do wstawiania treści. Możesz ich też używać do kierowania reklam na określone części elementu. Załóżmy na przykład, ż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;
}

Za pomocą atrybutu ::selection możesz też określić styl treści wyróżnionej przez użytkownika.

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

Więcej informacji znajdziesz w module na temat pseudoelementów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o pseudoselektorach

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

:
Jeden typ : jest używany do kierowania na pseudoklasy.
::
Dwa elementy :: są używane do kierowania na pseudoelementy.
:::
Jest on nieprawidłowy i nie jest na nic kierowany.
 
p:hover {
  background: white;
  color: black;
}

Jaki rodzaj pseudoselektora jest używany w powyższym fragmencie kodu?

Pseudoklasa
Jeden typ : jest używany do kierowania na pseudoklasy.
Pseudoelement
Dwa elementy :: są używane do kierowania na pseudoelementy.

Złożone selektory

Wiemy już o szerokiej gamie selektorów, ale czasami potrzebujesz bardziej szczegółowej kontroli nad CSS. Dlatego pomocne są tu złożone selektory.

Warto zapamiętać, że chociaż poniższe selektory dają nam więcej możliwości, możemy tylko przesuwać w dół, wybierając elementy podrzędne. Nie możemy ustawić kierowania w górę i wybrać elementu nadrzędnego. Wyjaśnimy, czym jest kaskada i jak działa. w następnej lekcji.

Kombinatory

Kombinator to element składowy 2 selektorów. Jeśli np. selektorem jest p > strong, kombinacjami jest znak >. Selektory korzystające z tych kombinacji ułatwiają wybieranie elementów na podstawie ich położenia w dokumencie.

Kombinator elementów podrzędnych

Aby zrozumieć kombinacje potomne, musisz najpierw zrozumieć 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>, przez co jego zawartość jest pogrubiona. Ponieważ znajduje się w elemencie <p>, jest to element podrzędny.

Kombinator podrzędny umożliwia kierowanie na element podrzędny. Powoduje to użycie spacji (), która instruuje przeglądarkę, aby szukała elementów podrzędnych:

p strong {
  color: blue;
}

Ten fragment powoduje zaznaczenie wszystkich elementów <strong> , które są elementami podrzędnymi tylko w elementach <p>, przez co rekursywnie powtarzają się na niebiesko.

Kombinator potomny jest rekurencyjny, Dopełnienie dodane do każdego elementu podrzędnego jest stosowane, co skutkuje rozłożeniem.

Efekt ten lepiej przedstawia powyższy przykład, za pomocą selektora kombinacji (.top div). Ta reguła CSS dodaje dopełnienie z lewej strony tych elementów <div>. Ponieważ kombinator jest rekurencyjny, wszystkie elementy <div> w sekcji .top będą miały takie samo dopełnienie.

Spójrz na panel HTML w tej demonstracji by zobaczyć, jak element .top ma kilka elementów podrzędnych <div>, które same mają <div> elementy podrzędne.

Kombinator następnego elementu równorzędnego

Możesz poszukać elementu, który występuje zaraz po innym elemencie używając znaku + w selektorze.

Aby dodać odstęp między elementami nałożonymi na stos: użyj następnej kombinacji elementów równorzędnych, aby dodać miejsce tylko wtedy, gdy element jest następnym elementem potomnym elementu podrzędnego .top.

Możesz dodać margines do wszystkich elementów podrzędnych tagu .top, użyj takiego selektora:

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

Problem polega na tym, że ponieważ wybierasz każdy element podrzędny elementu .top, ta reguła może spowodować utworzenie dodatkowego, niepotrzebnego miejsca. Kolejna kombinacja, w połączeniu z selektorem uniwersalnym pozwala nie tylko kontrolować, które elementy mają mieć miejsce, ale też do dowolnego elementu. Zapewnia to pewną długoterminową elastyczność, bez względu na to, jakie elementy HTML pojawią się w elemencie .top.

Kolejna – kombinacja równorzędnej

Kolejna kombinacja jest bardzo podobna do następnego selektora równorzędnego. Zamiast znaku + użyj znaku ~. Różnica polega na tym, że element musi następować po innym elemencie z tym samym elementem nadrzędnym, a nie kolejny element z tym samym elementem nadrzędnym.

Użyj kolejnego selektora wraz z pseudoklasą „:checked”, aby utworzyć czysty element przełączania CSS.

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

Kombinator podrzędny

Kombinator podrzędny (nazywany też bezpośrednim elementem potomnym) daje większą kontrolę nad rekurencją, którą zapewniają selektory kombinacji. Używając znaku >, ograniczasz selektor kombinacji do stosowania tylko do kierowania elementów podrzędnych.

Spójrzmy na poprzedni przykład selektora elementów równorzędnych. Pokój zostanie dodany do każdego następnego elementu równorzędnego, ale jeśli jeden z tych elementów ma również następne elementy równorzędne jako elementy podrzędne, może to doprowadzić do niepożądanych, dodatkowych odstępów.

Aby uniknąć tego problemu, zmień selektor następnego elementu równorzędnego, aby uwzględnić kombinację podrzędną: > * + *. Reguła będzie teraz stosowana tylko do bezpośrednich elementów podrzędnych zasobu .top.

Selektory złożone

Możesz łączyć selektory, aby zwiększyć precyzję i czytelność. Aby na przykład ustawić kierowanie na elementy typu <a>, które również mają klasę .my-class, wpisz:

a.my-class {
  color: red;
}

Czerwony kolor nie zostanie zastosowany do wszystkich linków i zastosowałby kolor czerwony tylko do .my-class, jeśli byłby on w elemencie <a>. Więcej informacji na ten temat znajdziesz w module szczegółowości.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę na temat złożonych selektorów

Który z tych symboli nie jest kombinacją selektora?

>
Kombinator bezpośrednich elementów podrzędnych.
÷
Nieprawidłowy symbol CSS.
+
Następny odpowiednik tej kombinacji.
*
Ten uniwersalny prosty selektor.
.
Prosty selektor klasy.
 
section.awesome {
  border: 1px solid hotpink;
}

Powyższy selektor to przykład...

Kombinacja
Symbol służący do łączenia selektorów w bardziej konkretny.
Selektor złożony
Gdy używasz razem co najmniej 2 selektorów, bez kombinatora, aby uzyskać bardziej szczegółowy selektor.
Terminator
To nie jest typ selektora, ale wygląda na to, że nie? 🤖

Zasoby