Jak wspominałam we wpisie pt. „O tym co to jest CSS” (link tutaj), na reguły w arkuszach stylów składają się deklaracje, czyli właściwości i nadawane im wartości, nawiasy klamrowe oraz selektory. Te ostatnie odpowiadają na pytanie, którym elementom nadać style ustalone w deklaracjach. W jaki sposób zatem w CSS wskazywać wybrane elementy? Poniżej omawiam kilka sposobów.
Spis treści
- Selektory elementów
- Selektor dziecka
- Selektor potomka
- Selektor rodzeństwa
- Ogólny selektor rodzeństwa
- Selektor (pojedynczego) rodzeństwa
- Selektor uniwersalny
- Klasy selektorów
- Selektory identyfikatora
- Pseudo-elementy
- :first-letter
- :first-line
- :before
- :after
- Pseudo-klasy
- :link
- :visited
- :active
- :hover
- :focus
Selektory elementów
Najbardziej podstawowy rodzaj selektora CSS to selektor bazujący na odpowiadającym mu elemencie HTML. Reguła napisana w ten sposób:
p {
color: red;
}będzie odpowiadała każdemu elementowi <p> na stronie i każdemu nada czerwony kolor (o ile któryś z nich nie zostanie nadpisany w inny sposób).
Przy użyciu selektorów elementów można wskazywać nie tylko element per se, ale również wybrać inne elementy znajdujące się pewnej relacji do wskazanego, np. jego elementy potomne.
Selektor dziecka
Bezpośredniego potomka elementu można wskazać przy użyciu symbolu >. Jeżeli dla poniższego kodu HTML
<p>Tekst 1</p> <div> <p>Tekst 2</p><span> <p>Tekst 3</p> </span> </div> <p>Tekst 4</p>
zdefiniujemy poniższy kod CSS
div > p {
color: red;
}to jedynie akapit z treścią „Tekst 2” zostanie wyświetlony w kolorze czerwonym.
Selektor potomka
Selektor potomka wskazuje na element zagnieżdżony na dowolnym poziomie. Aby osiągnąć taki efekt należy wymienić element zagnieżdżony po elemencie zagnieżdżającym, np. div p. Zatem dla tego samego kodu HTML, rozważanego powyżej
<p>Tekst 1</p> <div> <p>Tekst 2</p><span> <p>Tekst 3</p> </span> </div> <p>Tekst 4</p>
kod CSS zmieniony na
div p {
color: red;
}oznacza, że czerwony będzie zarówno „Tekst 2” jak i „Tekst 3”.
Selektor rodzeństwa
CSS oferuje dwa rodzaje wskazywania elementów rodzeństwa, czyli elementów położonych na tym samym poziomie zagnieżdżenia, mających wspólnego rodzica.
Ogólny selektor rodzeństwa
Do wskazywania rodzeństwa dla wybranego elementu służy symbol ~. Dla poniższego kodu HTML
<p>Tekst 1</p>
<div>Tekst 2</div>
<div>Tekst 3</div>
<span>Tekst 4</span>nadanie stylów CSS
p ~ div {
color: red;
}
p ~ span {
color: blue;
}oznacza, że „Tekst 2” oraz „Tekst 3” wyświetlone zostaną w kolorze czerwonym, natomiast „Tekst 4” – niebieskim.
Warto zwrócić uwagę, że ta reguła dotyczy elementów, które znajdują się po elemencie bazowym. Zmiana kodu HTML na
<div>Tekst 1</div> <span>Tekst 2</span><p>Tekst 3</p> <div>Tekst 4</div> <div>Tekst 5</div> <span>Tekst 6</span>
da poniższy efekt:
Selektor (pojedynczego) rodzeństwa
Przy użyciu symbolu + można wskazać element sąsiadujący z wybranym elementem. Dla poniższego kodu HTML
<span>Tekst 1</span> <div>Tekst 2</div><p>Tekst 3</p> <div>Tekst 4</div> <div>Tekst 5</div> <span>Tekst 6</span>
nadanie poniższych stylów
p + div {
color: red;
}
p + span {
color: blue;
}spowoduje, że jedynym elementem, który otrzyma kolor będzie „Tekst 4”, ponieważ jako jedyny bezpośrednio sąsiaduje z elementem p oraz znajduje się po nim.
Selektor uniwersalny
Istnieje również symbol, za pomocą którego można wskazać na wszystkie elementy znajdujące się na stronie, mianowicie *. Dla tego samego HTML, co rozważany powyżej
<span>Tekst 1</span> <div>Tekst 2</div><p>Tekst 3</p> <div>Tekst 4</div> <div>Tekst 5</div> <span>Tekst 6</span>
po nadaniu stylów w poniższy sposób
* {
color: red;
}da efekt w postaci wyświetlenia wszystkich elementów w kolorze czerwonym:
Klasy selektorów
Jednym z najczęściej spotykanych sposób nadawania stylów jest użycie atrybutu class dla elementów HTML. Nazwa klasy nie może zawierać spacji i wielu znaków specjalnych, najlepiej nie używać również znaków diakrytycznych (np. ś, ć, ü, ñ i wiele innych). Może jednak zawierać myślniki i podreślniki oraz cyfry i litery.
Klasy w dokumencie CSS poprzedza się kropką.
W atrybucie class można na raz użyć większej liczby klas. Ich kolejność nie ma znaczenia, a same klasy można składać w zbiory. W praktyce oznacza to wylistowanie klas, które muszą zostać przypisane do elementu, aby reguła została użyta.
Dla poniższego kodu HTML
<p class="class-1 class-2 class-3">Tekst 1</p>
<p class="class-1 class-2">Tekst 1</p>zadeklarowano taki kod CSS
.class-1.class-2.class-3 {
color: red;
}efekt w przeglądarce będzie wobec tego następujący (pierwszy element zostanie wyświetlony na czerwono, drugi pozostanie bez formatowania):
Selektory identyfikatora
Do nadawania stylów można użyć identyfikatora elementu, czyli atrybutu id. Przy nadawaniu nazewnictwa identyfikatorom obowiązują takie same ograniczenia jak przy klasach, tj. nie mogą zawierać spacji i wielu znaków specjalnych, najlepiej nie używać również znaków diakrytycznych (np. ś, ć, ü, ñ i wiele innych). Mogą jednak zawierać myślniki i podreślniki oraz cyfry i litery. Dodatkowo identyfikator musi być unikalny w obrębie strony.
Identyfikatory w kodzie CSS poprzedza się symbolem #.
W praktyce użycie id wygląda następująco:
<p id="my-id">Tekst 1</p>natomiast definiowanie stylów dla identyfikatora to
#my-id {
color: red;
}Pseudo-elementy
Wyobraź sobie, że dostajesz do edycji stronę internetową z mnóstwem treści. Twoim zadaniem jest wybranie pierwszej litery z każdego z akapitu i edytować ją tak, żeby była trzy razy większa niż reszta tekstu oraz żeby dalsza treść ją opływała z prawej strony. Jak się za to zabierzesz?
Oczywiście możesz dłubać ręcznie i każdą pierwszą literę akapitu otaczać tagiem <span> i nadawać jej style, jednak jest to rozwiązanie – delikatnie rzecz ujmując – mało optymalne. O wiele prościej byłoby użyć pseudo-elementu :first-letter.
:first-letter
Jest to selektor pseudo-elementu odpowiadający pierwszej literze wybranego elementu. Element musi być elementem blokowym lub liniowo-blokowym (przy display o wartości inline, flex lub inline-flex nie zadziała). Dla podanego kodu HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit(...)</p>po nadaniu poniższych stylów
p:first-letter {
font-family: 'Times New Roman', serif;
font-size: 300%;
float: left;
padding-right: 5px;
}efekt będzie wyglądał następująco:
:first-line
Analogicznie do dostępu do pierwszej litery, można uzyskać dostęp do pierwszej linii. Służy do tego pseudo-element :first-line. Tak samo jak w przypadku :first-letter element musi być elementem blokowym lub liniowo blokowym. Przykład użycia:
p:first-line {
color: red;
}:before
Pseudo-element :before pozwala na dodawanie elementów (np. tekstu lub symboli unicode) przed wskazanym elementem. Rozważmy kod HTML:
<p>Raz</p>
<p>Dwa</p>
<p>Trzy</p>i poniższy CSS
p:before {
content: " \FFEB";
}da efekt w postaci:
:after
Analogicznie do pseudo-elementu wskazującego przestrzeń przed elementem, CSS oferuje pseudo-element :after, który wskazuje przestrzeń za elementem.
Na tym lista pseudo-elementów wcale się kończy, powyżej wymieniłam jedynie te najczęściej używane.
Pseudo-klasy
Pseudo-klasy są wartością dynamicznie nadawaną i odbieraną elementowi, np. podczas akcji użytkownika, takich jak np. najazd myszką na link czy stan przycisku po kliknięciu. Poniżej omawiam wybrane pseudo-klasy.
:link
Pseudo-klasa :link pozwala na nadawanie stylów linków, które nie zostały odwiedzone.
:visited
:visited tak samo jak :link służy do formatowania sposobu wyświetlania linków, które zostały odwiedzone przez użytkownika.
:hover
Pseudo-klasa :hover odpowiada stanowi elementu, nad którym znajduje się kursor użytkownika kiedy element ten nie został jeszcze kliknięty.
:active
Pseudo-klasa :active służy do nadawania stylów elementów, które zostały aktywowane przez użytkownika, np. łącza w momencie kliknięcia.
:focus
:focus odpowiada stanowi elementu, który został wybrany przez użytkownika, jak np. pole formularza z wyświetlonym kursorem czy element wybrany za pomocą klawisza Tab.