2.6. Grupowanie selektorów (,)
Wprowadzenie: DRY (Don't Repeat Yourself) w CSS
Często zdarza się, że chcemy zastosować dokładnie te same style do wielu różnych elementów lub grup elementów. Na przykład, możemy chcieć, aby wszystkie nagłówki (h1, h2, h3) miały tę samą czcionkę, albo aby zarówno paragrafy, jak i elementy listy miały ten sam kolor tekstu.
Zamiast pisać oddzielne reguły CSS dla każdego selektora z tymi samymi deklaracjami, co prowadziłoby do powtarzania kodu, możemy użyć mechanizmu **grupowania selektorów**. Polega on na wymienieniu wszystkich selektorów, do których chcemy zastosować dany zestaw stylów, oddzielając je **przecinkami (,)**.
Składnia
Aby zgrupować selektory, wystarczy wymienić je jeden po drugim, oddzielając każdy przecinkiem. Po ostatnim selektorze w grupie następuje standardowy blok deklaracji {}.
/* Zamiast pisać: */
h1 {
font-family: 'Georgia', serif;
color: #333;
}
h2 {
font-family: 'Georgia', serif;
color: #333;
}
h3 {
font-family: 'Georgia', serif;
color: #333;
}
/* Możemy zgrupować selektory: */
h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}
/* Inny przykład: styl dla paragrafów i elementów listy */
p, li {
line-height: 1.6;
margin-bottom: 10px;
}
/* Można grupować różne typy selektorów */
.przycisk, #glowny-link, input[type="submit"] {
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}Grupowanie selektorów znacząco skraca kod CSS, czyni go bardziej czytelnym i łatwiejszym w utrzymaniu. Zmiana stylu w jednym miejscu (w bloku deklaracji zgrupowanej reguły) wpłynie na wszystkie elementy pasujące do któregokolwiek ze zgrupowanych selektorów.
Specyficzność zgrupowanych selektorów
Grupowanie selektorów **nie wpływa** na specyficzność poszczególnych selektorów w grupie. Każdy selektor w liście oddzielonej przecinkami jest traktowany niezależnie pod względem obliczania specyficzności.
Na przykład, w regule h1, .klasa, #id { color: red; }:
- Dla elementów
<h1>, specyficzność tej reguły wynosi (0,0,0,1). - Dla elementów z klasą
.klasa, specyficzność tej reguły wynosi (0,0,1,0). - Dla elementu z ID
#id, specyficzność tej reguły wynosi (0,1,0,0).
Przeglądarka stosuje styl color: red; do elementu, jeśli pasuje on do któregokolwiek ze selektorów w grupie, biorąc pod uwagę specyficzność tego konkretnego selektora w kontekście innych reguł dotyczących tego elementu.
Zastosowania i dobre praktyki
- Ujednolicanie bazowych stylów: Idealne do ustawiania wspólnych stylów dla powiązanych elementów, np. wszystkich poziomów nagłówków, różnych elementów tekstowych, elementów formularzy.
- Resetowanie/Normalizacja: Grupowanie jest powszechnie stosowane w resetach CSS do zastosowania tych samych zerowych marginesów, paddingów itp. do wielu różnych elementów jednocześnie.
- Czytelność: Używaj grupowania, aby unikać powtórzeń i utrzymać zwięzłość kodu.
- Formatowanie: Dla lepszej czytelności, często umieszcza się każdy selektor w grupie w nowej linii, zwłaszcza gdy lista jest długa:
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5em;
margin-bottom: 0.5em;
font-weight: bold;
}Zadania praktyczne
Zadanie 1 (z rozwiązaniem)
Stwórz plik HTML zawierający nagłówek <h1>, paragraf <p> oraz element <strong> wewnątrz paragrafu. Użyj grupowania selektorów w CSS, aby nadać wszystkim tym trzem typom elementów (h1, p, strong) ten sam kolor tekstu, np. ciemnoszary (#444).
Rozwiązanie:
Plik HTML (np. index.html):
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zadanie 1 - Grupowanie Selektorów</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Główny Nagłówek</h1>
<p>To jest paragraf z <strong>pogrubionym</strong> tekstem.</p>
</body>
</html>Plik CSS (style.css):
h1,
p,
strong {
color: #444;
}Efekt: Zarówno nagłówek, jak i cały tekst paragrafu (włącznie z pogrubionym fragmentem) będą miały kolor ciemnoszary.
Zadanie 2 (do samodzielnego wykonania)
Masz różne elementy formularza: <input type="text">, <input type="email">, <textarea>, <select>. Użyj grupowania selektorów (w tym selektorów atrybutów dla inputów), aby nadać im wszystkim wspólne style, np. szerokość 100% (width: 100%;), padding 8px i obramowanie 1px solid #ccc.
Zadanie 3 (do samodzielnego wykonania)
Zdefiniuj styl dla klasy .highlight (np. żółte tło). Zdefiniuj również styl dla ID #special-item (np. czerwone obramowanie). Następnie użyj grupowania, aby nadać zarówno elementom z klasą .highlight, jak i elementowi o ID #special-item pogrubioną czcionkę (font-weight: bold;).
FAQ - Najczęściej zadawane pytania
Czy mogę grupować bardzo różne typy selektorów?
Tak, można grupować dowolne poprawne selektory CSS: selektory typu, klasy, ID, atrybutów, pseudoklasy, pseudoelementy, a nawet złożone kombinatory. Wszystkie elementy pasujące do któregokolwiek ze selektorów w grupie otrzymają zdefiniowane style.
Co się stanie, jeśli jeden z selektorów w grupie jest niepoprawny?
Jeśli jeden z selektorów w grupie oddzielonej przecinkami jest niepoprawny składniowo, przeglądarka zazwyczaj zignoruje **całą regułę CSS** (dla wszystkich selektorów w tej grupie). Dlatego ważne jest, aby upewnić się, że wszystkie selektory w grupie są poprawne.
Czy kolejność selektorów w grupie ma znaczenie?
Nie, kolejność selektorów oddzielonych przecinkami nie ma wpływu na działanie reguły ani na specyficzność. h1, p działa tak samo jak p, h1.
Czy grupowanie selektorów poprawia wydajność CSS?
Główną zaletą grupowania jest redukcja rozmiaru pliku CSS i poprawa jego czytelności oraz łatwości utrzymania. Bezpośredni wpływ na wydajność renderowania jest zazwyczaj minimalny, ale mniejszy rozmiar pliku oznacza szybsze jego pobranie przez przeglądarkę.