Wybieranie elementów id CSS

Selektory id

Selektory id mogą przypisywać specyficzne style do elementów HTML oznaczonych konkretnym id.

Selektory id są definiowane za pomocą "#".

Poniższe dwa selektory id, pierwszy definiuje kolor elementu na czerwony, drugi na zielony:

#red {color:red;}
#green {color:green;}

W poniższym kodzie HTML, element o atrybucie id red będzie wyświetlany na czerwono, a element o atrybucie id green będzie wyświetlany na zielono.

<p id="red">Ten akapit jest czerwony。</p>
<p id="green">Ten akapit jest zielony。</p>

Uwaga:Atrybut id może występować tylko raz w każdym dokumencie HTML. Chcesz wiedzieć dlaczego? Zobacz XHTML: rekonstrukcja strony.

Id selektor i selektor pochodny

W nowoczesnych układach id selektor jest często używany do tworzenia selektorów pochodnych.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Powyższe style będą stosowane tylko do akapitów znajdujących się wewnątrz elementu o id sidebar. Ten element jest prawdopodobnie div lub komórka tabeli, chociaż może to być również tabela lub inny blokowy element. Może to nawet być element wewnętrzny, np. <em></em> lub <span></span>, ale takie użycie jest nielegalne, ponieważ nie można wstawiać <p> do elementu wewnętrznego <span> (jeśli zapomniałeś przyczyny, zobacz XHTML: rekonstrukcja strony）。

Jeden selektor, wiele zastosowań

Nawet jeśli element oznaczony jako sidebar może występować tylko raz w dokumencie, ten selektor id jako selektor pochodny może być używany wiele razy:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

W tym przypadku, w przeciwieństwie do innych elementów p na stronie, elementy p w sidebar są specjalnie traktowane, a także, w przeciwieństwie do wszystkich innych elementów h2 na stronie, elementy h2 w sidebar są również specjalnie traktowane.

Oddzielny selektor

Selektor id może działać niezależnie, nawet jeśli nie jest używany do tworzenia pochodnych selektorów:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Zgodnie z tą regułą, element o id 'sidebar' będzie miał czarną kropkową krawędź o szerokości jednego piksela, a wokół niego będzie 10 pikseli wewnętrznego marginesu (padding, wewnętrznej przestrzeni). Starsze wersje przeglądarek Windows/IE mogą pomijać tę regułę, chyba że specjalnie zdefiniujesz element, do którego należy ten selektor:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Związane treści

Jeśli potrzebujesz bardziej zaawansowanej wiedzy na temat selektorów id, przeczytaj zaawansowane kursy CodeW3C.com:Szczegółowe wyjaśnienie selektorów id CSS.