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ę.
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
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
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ęć
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
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
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;
}
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?
div {}
Jakiego prostego selektora użyto w tym fragmencie kodu?
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?
p:hover { background: white; color: black; }
Jaki rodzaj pseudoselektora jest używany w powyższym fragmencie kodu?
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.
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.
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?
section.awesome { border: 1px solid hotpink; }
Powyższy selektor to przykład...