Selektory

Czytasz angielską wersję tego artykułu, ponieważ nie ma jeszcze tłumaczenia dla tego języka. Pomóż nam przetłumaczyć ten artykuł!

Ta strona jest częścią piątą kursu CSS Getting Started. Wyjaśnia ona jak możesz używać stylów selektywnie, i jak różne typy selektorów mają różne priorytety. Dodasz pewne atrybuty do znaczników w swoim przykładowym dokumencie oraz użyjesz w nim tych atrybutów.

Informacja: Selektory

CSS posiada własną terminologię do opisania języka CSS. Poprzednio w trakcie tego kursu stworzyłeś(aś) linię w swoim arkuszu stylów w ten sposób:

strong {
   color: red;
}

W terminologii CSS cała ta linia jest regułą. Ta reguła zaczyna się od strong, który jest selektorem. Wybiera, które elementy w drzewie DOM będą używały tej reguły.

Więcej szczegółów
Część wewnątrz nawiasów klamrowych nazywamy się deklaracją.

Słowo kluczowe color jest własnością, a red jest wartością.

Średnik po parze własność-wartość oddziela ją od innych par własność-wartość w tym samym opisie.

Ten kurs odwołuje się do selektorów takich jak strong jako selektorów znaczników. Specyfikacja CSS odwołuje się do nich jako selektorów typu.

Ta strona kursu wyjaśnia więcej na temat selektorów, których możesz używać w regułach CSS.

Dodatkowo do nazw znaczników możesz używać wartości atrybutów w selektorach. To pozwala sprecyzować Twoje reguły.

Dwa atrybuty posiadają specjalny status w CSS. Są to class oraz id.

Selektor class

Użycie atrybutu class w znaczniku przypisuje znacznikowi nazwaną klasę. Ty decydujesz jak ją nazwiesz.

W swoim arkuszu stylów wpisz kropkę przed nazwą klasy, kiedy używasz jej w selektorze.

Selektor ID

Użycie atrybutu id w znaczniku przypisuje id do znacznika. Ty decydujesz, jakie id mu nadasz. Nazwa id musi być unikalna w dokumencie.

W swoim arkuszu stylów wpisz znak numeru ("płotek" (ang. hash)) przed tym id, kiedy używasz go w selektorze.

Przykłady
Ten znacznik HTML posiada zarówno atrybut class, jak i id:

<p class="key" id="principal">

Id, principal, musi być unikalne w dokumencie, lecz inne znaczniki mogą używać tej samej nazwy klasy key.

W arkuszu stylów CSS ta reguła powoduje, że wszystkie elementy klasy key staną się zielone. (Nie wszystkie muszą być elementami P.)

.key {
   color: green;
}

Ta reguła powoduje, że jeden element o id principal zostanie pogrubiony:

#principal {
   font-weight: bolder;
}

Jeżeli więcej niż jedna reguła odnosi się do elementu i określa tę samą własność, wtedy CSS nadaje priorytet regule, która posiada bardziej szczegółowy selektor. Selektor id jest bardziej szczegółowy od selektora klasy, który z kolei jest bardziej szczegółowy od selektora znacznika.

Więcej szczegółów
Możesz też mieszać selektory, czyniąc je bardziej szczegółowymi.

Na przykład selektor .key wybiera wszystkie elementy, które mają klasę o nazwie key. Selektor p.key wybiera tylko elementy P, które mają klasę o nazwie key.

Nie jesteś ograniczony(a) do dwóch specjalnych atrybutów, class i id. Możesz określać inne atrybuty poprzez użycie nawiasów kwadratowych. Na przykład selektor [type=button] wybiera wszystkie elementy, które mają atrybut type o wartości button.

W dalszej części kursu (Tabele) można znaleźć informacje na temat złożonych selektorów opartych na wzajemnych relacjach.

Aby dowiedzieć się więcej o selektorach, zajrzyj na stronę Selektory w specyfikacji CSS.

Jeżeli arkusz stylów posiada sprzeczne reguły i są one równie szczegółowe, wtedy CSS nadaje wyższy priorytet regule, która występuje później w arkuszu stylów.

Gdy napotkasz problem ze sprzecznymi regułami, spróbuj rozwiązać go poprzez ustawienie jednej z reguł jako bardziej szczegółowej, aby można im było nadać priorytety. Jeżeli nie możesz tego zrobić, spróbuj przesunąć jedną z reguł bliżej końca arkusza stylów, aby nadać jej wyższy priorytet.

Zadanie: Używanie selektorów class i id

1. Wyedytuj swój plik HTML i zduplikuj akapit poprzez skopiowanie i wklejenie go.
2. Następnie dodaj atrybuty id i class do pierwszej kopii, a potem id do drugiej:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </p>
    <p id="second">
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html

Teraz wyedytuj swój plik CSS. Zamień całą treść na:

strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }

Odśwież okno przeglądarki, aby zobaczyć wynik:

Cascading Style Sheets
Cascading Style Sheets

Możesz zmieniać kolejność linii w pliku CSS, aby zobaczyć, że kolejność nie ma wpływu na wynik.

Selektory klas .carrot oraz .spinach mają priorytety nad selektorem znaczników strong.

Selektor id #first ma priorytet nad selektorami klas i znaczników.

Wyzwanie
Bez zmieniania pliku HTML dodaj do pliku CSS pojedyncze reguły, które sprawią, że wszystkie początkowe litery będą nadal tego samego koloru, ale cały pozostały tekst w drugim akapicie stanie się niebieski:
Cascading Style Sheets
Cascading Style Sheets

Teraz zmień regułę, którą właśnie dodałeś(aś) (bez zmieniania czegokolwiek innego), aby pierwszy akapit też był niebieski:

Cascading Style Sheets
Cascading Style Sheets

Zadanie: użycie pseudo selectorów

  1. Utwórz plik HTML z następują treścią: 
    <!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
  </body>
</html>
  2. Edytuj plik CSS. Zamień jego treść na: 
    a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}
  3. Zapisz pliki i odśwież przeglądarkę aby zobaczyć rezultat (przeciągnij muszkę nad przycisk, aby zobaczyć efekt):
    Go to our Home page

Co dalej?

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

Twój przykładowy arkusz stylów zaczyna wyglądać na zbity i skomplikowany. W następnej części opiszemy jak sprawić, by CSS był łatwiejszy w czytaniu: Czytelny CSS