CSS Selecting by id

Na tej stronie, używając języka CSS,

zmieniamy styl nagłówków
„h2” i akapitów.

Wszystkie nagłówki są zielone,
a akapity - fioletowe.

A gdybyśmy chcieli wybrać
tylko pierwszy „h2”

lub zmienić styl
tylko w drugim akapicie?

Musimy jakoś powiedzieć
przeglądarce,

które elementy wybieramy,

by nie zmieniała stylu
we wszystkich, jak teraz.

Jeden sposób - to wybór po ID.

Nadajemy znacznikowi
niepowtarzalny ID

i informujemy CSS:

„Chcę zastosować te style
tylko do elementu z tym ID,

do żadnych innych".

Najpierw trzeba zmodyfikować HTML,

by dodać atrybuty ID
do wybranych znaczników.

Zacznijmy od drugiego akapitu.

Aby dodać atrybut ID,
umieszczamy kursor

w pierwszym znaczniku „p”,
zaraz po „p”,

później spacja i wpisujemy:
id = ""

Atrybutowi ID trzeba nadać wartość.

Jakie ma być ID?

Opisowe i niepowtarzalne.

Nic innego na stronie
nie może mieć takiego ID.

Skoro to piosenka o królikach,
napiszę rabbits-song („kroliki-piosenka”).

W ID nie można wpisywać spacji.
Słowa rozdziela się

za pomocą dywizów i podkreślników.

Ja lubię dywizy.

Akapit już można zidentyfikować.

Dodajmy regułę CSS,
która go znajdzie.

Wróćmy do znacznika „style”,
by zacząć drugi etap.

Dodamy nowy wiersz,
po ostatniej regule.

Pamiętajcie, pierwsza część
reguły CSS to selektor.

Mówi przeglądarce, co wybrać.

Poprzednio używaliśmy
selektorów „h2” oraz „p”,

by wybrać wszystkie
znaczniki „h2” i „p” na stronie.

Aby selektor wybierał tylko elementy

z konkretnym ID,

zaczniemy od kratki.

Mówi to przeglądarce,
że dalej jest ID.

Teraz wpisujemy ID:
„rabbits-song”.

Reszta reguły
pozostaje taka sama.

Otwieramy i zamykamy klamry,

dodajemy właściwość,
np. kolor tła

I już! Udało się!

Tylko akapit z piosenką
ma żółte tło.

Pierwszy się nie zmienił.

Teraz zmieńmy
pierwszy nagłówek „h2”.

Pamiętacie pierwszy krok?

Tak, trzeba zmienić HTML,

dodając atrybut „id”.

Kursor do znacznika początkowego,

spacja, wpisujemy: id=""

a potem niepowtarzalne,
opisowe ID.

Niech będzie:
„rabbits-info-heading”.

Teraz krok drugi.
W znaczniku „style”

dodajemy nowy wiersz z kratką,

potem nasze ID,
czyli „rabbits-info-heading”

i właściwości w klamrach.

Kolor tła: fiolet.

Nie udało się. Wiecie, dlaczego?

Czy napisałam tak samo?

rabbits-info-Heading,
rabbits-info-heading...

Wyglądają tak samo.

Mogłabym porównać
literę po literze,

aby znaleźć błąd,

wolę jednak wybrać ID z HTML,

skopiować je i wkleić.
Żeby było identyczne.

I… Udało się!

Nagłówek „h2” ma tło.
Zauważyliście błąd?

Może. Tu było małe „h”.
A tutaj wielkie „H”.

Przeglądarka nie uznała ich
za to samo.

Musi być małe „h”, jak w ID w HTML.

Bo w ID liczy się wielkość liter.

Wszędzie musi być ten sam zapis.

Ja w ID używam samych małych liter,

żeby się nie zastanawiać
nad wielkością.

Na koniec ostrzeżenie:

ID muszą być niepowtarzalne.

Gdy dwa znaczniki na stronie
mają takie samo ID,

przeglądarka może zmienić oba
albo tylko jeden.

Nie zdawajcie się na przypadek.

Niepowtarzalne, opisowe ID!