Selektory CSS i ich zastosowanie

Temat: Selektory CSS i ich zastosowanie

Selektory to nic innego jak "adresy", które kierują nasze style CSS do odpowiednich elementów na stronie. Dzięki nim możemy stylować pojedyncze elementy, grupy elementów czy nawet określać style w zależności od położenia elementu w strukturze dokumentu.

Przygotuj się na podróż przez różne rodzaje selektorów, ich zastosowanie i praktyczne przykłady, które pomogą Ci lepiej zrozumieć, jak z nich korzystać w swoich projektach.

Dlaczego selektory są ważne?

• Precyzja: Pozwalają dokładnie określić, które elementy mają zostać wystylizowane.
• Efektywność: Umożliwiają stylowanie wielu elementów jednocześnie.
• Elastyczność: Dzięki różnym rodzajom selektorów możemy tworzyć zaawansowane reguły stylowania.
• Organizacja: Pomagają utrzymać kod CSS czytelny i łatwy w utrzymaniu.

Podstawowe rodzaje selektorów

1. Selektor elementu (tagu)

Styluje wszystkie elementy danego typu.

Składnia:

element {
  /* deklaracje stylów */
}

Przykład:

p {
  color: blue;
}

Powyższy kod zmieni kolor tekstu na niebieski we wszystkich akapitach <p>.

2. Selektor klasy

Styluje elementy z określoną klasą.

Składnia:

.klasa {
  /* deklaracje stylów */
}

Przykład:

.highlight {
  background-color: yellow;
}

W HTML przypisujemy klasę do elementu:

<p class="highlight">Ten akapit ma żółte tło.</p>

3. Selektor identyfikatora (ID)

Styluje element z unikalnym identyfikatorem.

Składnia:

#identyfikator {
  /* deklaracje stylów */
}

Przykład:

#naglowek {
  font-size: 24px;
  text-align: center;
}

W HTML:

<h1 id="naglowek">Witamy na naszej stronie</h1>

Uwaga: Identyfikator id powinien być unikalny w obrębie całego dokumentu.

Złożone selektory

4. Selektor grupowy

Pozwala stosować te same style do wielu selektorów.

Składnia:

selektor1, selektor2, selektor3 {
  /* deklaracje stylów */
}

Przykład:

h1, h2, h3 {
  color: darkblue;
}

Zmienia kolor tekstu na ciemnoniebieski we wszystkich nagłówkach od <h1> do <h3>.

5. Selektor potomka

Styluje elementy znajdujące się wewnątrz innego elementu.

Składnia:

rodzic potomny {
  /* deklaracje stylów */
}

Przykład:

ul li {
  margin-bottom: 10px;
}

Styluje wszystkie elementy <li> znajdujące się w <ul>.

6. Selektor dziecka

Styluje elementy będące bezpośrednimi dziećmi innego elementu.

Składnia:

rodzic > dziecko {
  /* deklaracje stylów */
}

Przykład:

nav > ul {
  list-style-type: none;
}

Styluje tylko te listy <ul>, które są bezpośrednimi dziećmi elementu <nav>.

7. Selektor sąsiadujący

Styluje elementy, które są bezpośrednio po innym elemencie.

Składnia:

poprzednik + następnik {
  /* deklaracje stylów */
}

Przykład:

h2 + p {
  text-indent: 20px;
}

Styluje pierwszy akapit <p> po każdym nagłówku <h2>, dodając wcięcie.

8. Selektor atrybutu

Styluje elementy z określonym atrybutem lub wartością atrybutu.

Składnia:

element[atrybut] {
  /* deklaracje stylów */
}

element[atrybut="wartość"] {
  /* deklaracje stylów */
}

Przykład:

input[type="text"] {
  width: 200px;
}

Styluje wszystkie pola <input> o atrybucie type="text".

Pseudo-klasy i pseudo-elementy

9. Pseudo-klasy

Pozwalają stylować elementy w zależności od ich stanu lub położenia.

Przykłady najczęściej używanych pseudo-klas:

• :hover – gdy kursor znajduje się nad elementem.
• :active – gdy element jest aktywny (np. kliknięty).
• :focus – gdy element ma fokus (np. pole formularza).
• :first-child – pierwszy element wśród rodzeństwa.
• :last-child – ostatni element wśród rodzeństwa.

Przykład:

a:hover {
  color: red;
}

Zmienia kolor linku na czerwony, gdy użytkownik najedzie na niego myszką.

10. Pseudo-elementy

Pozwalają stylować określone części elementu.

Przykłady:

• ::before – wstawia treść przed zawartością elementu.
• ::after – wstawia treść po zawartości elementu.
• ::first-letter – styluje pierwszą literę.
• ::first-line – styluje pierwszą linię tekstu.

Przykład:

p::first-letter {
  font-size: 2em;
  color: green;
}

Powiększa i zmienia kolor pierwszej litery każdego akapitu.

Praktyczne zastosowanie selektorów

Stylowanie menu nawigacyjnego

HTML:

<nav>
  <ul class="menu">
    <li><a href="index.html">Strona główna</a></li>
    <li><a href="o-mnie.html">O mnie</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

CSS:

.menu {
  list-style-type: none;
  display: flex;
  justify-content: center;
}

.menu li {
  margin: 0 15px;
}

.menu li a {
  text-decoration: none;
  color: #333;
}

.menu li a:hover {
  color: #007BFF;
}

Wyjaśnienie:

• Selektor .menu styluje listę <ul> o klasie menu.
• Selektor .menu li styluje wszystkie elementy <li> wewnątrz listy menu.
• Selektor .menu li a styluje linki wewnątrz tych elementów <li>.
• Pseudo-klasa :hover zmienia kolor linku, gdy użytkownik najedzie na niego myszką.

Stylowanie formularza

HTML:

<form>
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">
  
  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email">
  
  <input type="submit" value="Wyślij">
</form>

CSS:

form {
  max-width: 400px;
  margin: auto;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form input[type="text"],
form input[type="email"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

form input[type="submit"] {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

form input[type="submit"]:hover {
  background-color: #0056b3;
}

Wyjaśnienie:

• Selektory atrybutów input[type="text"] i input[type="email"] stylują konkretne pola formularza.
• Pseudo-klasa :hover na przycisku wysyłania zmienia jego kolor po najechaniu myszką.

Specyficzność selektorów

Specyficzność określa, które reguły CSS mają priorytet, gdy wiele z nich dotyczy tego samego elementu.

Ogólna zasada:

• Style inline (style="") mają najwyższą specyficzność.
• Selektory ID (#identyfikator) mają wyższą specyficzność niż klasy i selektory atrybutów.
• Selektory klas (.klasa), atrybutów ([atrybut]) i pseudo-klas (:hover) mają średnią specyficzność.
• Selektory elementów (div, p, h1) mają najniższą specyficzność.

Przykład konfliktu:

p {
  color: black;
}

.highlight {
  color: green;
}

#ważny {
  color: red;
}

HTML:

<p class="highlight" id="ważny">Jaki kolor będzie miał ten tekst?</p>

Odpowiedź: Tekst będzie czerwony, ponieważ selektor ID #ważny ma wyższą specyficzność niż klasa .highlight czy selektor elementu p.

Dobre praktyki

• Unikaj nadużywania selektorów ID: Trudno je nadpisać ze względu na wysoką specyficzność.
• Używaj klas do stylowania: Są elastyczne i pozwalają na ponowne użycie stylów.
• Zachowaj prostotę selektorów: Zbyt złożone selektory mogą być trudne w utrzymaniu.
• Komentuj swój kod CSS: Ułatwia to zrozumienie i przyszłe modyfikacje.

Częste błędy i jak ich unikać

• Niewłaściwe użycie specyficzności: Używanie selektorów o zbyt wysokiej specyficzności utrudnia nadpisywanie stylów.
• Brak spójności w nazewnictwie klas i identyfikatorów: Utrudnia to pracę z kodem.
• Zbyt ogólne selektory: Stylowanie elementów ogólnych, takich jak div, może prowadzić do nieoczekiwanych efektów.
• Niepoprawne selektory potomków: Upewnij się, że struktura HTML odpowiada strukturze selektorów.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym są selektory CSS i jakie są ich rodzaje.
• Jak stosować selektory elementów, klas i identyfikatorów.
• Jak korzystać z bardziej zaawansowanych selektorów, takich jak selektory potomków, dzieci czy atrybutów.
• Czym są pseudo-klasy i pseudo-elementy oraz jak je wykorzystać.
• Jak działa specyficzność selektorów i dlaczego jest ważna.
• Dobre praktyki w korzystaniu z selektorów.

Selektory są fundamentem pracy z CSS. Pozwalają na precyzyjne i efektywne stylowanie elementów na stronie, co jest kluczowe dla tworzenia atrakcyjnych i funkcjonalnych witryn.

Zadania do samodzielnego wykonania

1. Stwórz stronę z listą artykułów:

   • Użyj różnych selektorów, aby wystylizować tytuły, treść i metadane artykułów.
   • Dodaj efekty najechania myszką na linki.

2. Zaprojektuj formularz rejestracji:

   • Wykorzystaj selektory atrybutów do stylowania różnych pól formularza.
   • Użyj pseudo-klasy :focus do podkreślenia aktywnego pola.

3. Przećwicz specyficzność:

   • Stwórz konflikty między stylami i spróbuj je rozwiązać, zmieniając specyficzność selektorów.
   • Obserwuj, jak zmiany wpływają na wyświetlanie elementów.

Ciekawostka

Czy wiesz, że w CSS istnieje selektor zwany "kombinatorem uogólnionego rodzeństwa" (~), który pozwala na stylowanie elementów poprzedzonych innym elementem, niezależnie od ich położenia w strukturze rodzeństwa? Na przykład:

h2 ~ p {
  color: gray;
}

Powyższy selektor styluje wszystkie akapity <p>, które są rodzeństwem <h2>, ale nie muszą być bezpośrednio po nim.