HTML
Klasy i dokumenty tożsamości

Wprowadzenie

Składnia

• class = "class1 class2 class3"
• id = "unikalny identyfikator"

Parametry

Uwagi

Nadanie elementowi klasy

Klasy są identyfikatorami elementów, do których są przypisane. Użyj atrybutu class aby przypisać klasę do elementu.

<div class="example-class"></div>

Aby przypisać wiele klas do elementu, oddziel nazwy klas spacjami.

<div class="class1 class2"></div>

Korzystanie z klas w CSS

Klasy mogą być używane do stylizacji niektórych elementów bez zmiany wszystkich elementów tego rodzaju. Na przykład te dwa elementy span mogą mieć zupełnie różne style:

<span></span>
<span class="special"></span>

Klasy o tej samej nazwie można nadać dowolnej liczbie elementów na stronie i wszystkie otrzymają styl związany z tą klasą. Będzie to zawsze prawdziwe, chyba że określisz element w CSS.

Na przykład mamy dwa elementy, oba z highlight klasy:

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Jeśli nasz CSS jest taki jak poniżej, wówczas kolor zielony zostanie zastosowany do tekstu w obu elementach:

.highlight { color: green; }

Jeśli jednak chcemy kierować div na highlight klasy, możemy dodać specyficzność, jak poniżej:

div.highlight { color: green; }

Niemniej jednak, podczas stylizacji za pomocą CSS, generalnie zaleca się stosowanie tylko klas (np. .highlight ) zamiast elementów z klasami (np. div.highlight ).

Podobnie jak w przypadku każdego innego selektora, klasy można zagnieżdżać:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

Możesz także połączyć selektor klas, aby wybierać tylko elementy, które mają kombinację kilku klas. Na przykład, jeśli jest to nasz HTML:

<div class="special left menu">This text will be pink</div>

I chcemy pokolorować ten konkretny fragment tekstu na różowo, możemy wykonać następujące czynności w naszym CSS:

.special.left.menu { color: pink; } 

Nadanie elementowi identyfikatora

Atrybut ID elementu jest identyfikatorem, który musi być unikalny w całym dokumencie. Jego celem jest jednoznaczna identyfikacja elementu podczas łączenia (za pomocą kotwicy), skryptów lub stylizacji (za pomocą CSS).

<div id="example-id"></div>

Nie powinieneś mieć dwóch elementów o tym samym identyfikatorze w tym samym dokumencie, nawet jeśli atrybuty są dołączone do dwóch różnych rodzajów elementów. Na przykład następujący kod jest niepoprawny:

<div id="example-id"></div>
<span id="example-id"></span>

Przeglądarki dołożą wszelkich starań, aby renderować ten kod, ale może wystąpić nieoczekiwane zachowanie podczas stylizacji za pomocą CSS lub dodawania funkcji za pomocą JavaScript.

Aby odwoływać się do elementów według ich identyfikatora w CSS, poprzedz go identyfikatorem # .

#example-id { color: green; }

Aby przejść do elementu o identyfikatorze na danej stronie, dołącz # z nazwą elementu w adresie URL.

http://example.com/about#example-id

Ta funkcja jest obsługiwana w większości przeglądarek i nie wymaga do działania dodatkowego JavaScript ani CSS.

Problemy związane ze zduplikowanymi identyfikatorami

Posiadanie więcej niż jednego elementu o tym samym identyfikatorze jest trudne do rozwiązania problemu. Parser HTML zwykle w każdym przypadku spróbuje wyrenderować stronę. Zwykle nie występuje błąd. Ale tempo może skończyć się niepoprawną stroną internetową.

W tym przykładzie:

<div id="aDiv">a</div>
<div id="aDiv">b</div>

Selektory CSS nadal działają

#aDiv {
    color: red;
}

Ale JavaScript nie obsługuje obu elementów:

var html = document.getElementById("aDiv").innerHTML;

W tym przypadku zmienna html zawiera tylko pierwszą zawartość div ("a") .

Dopuszczalne wartości

Dla identyfikatora

<div id="container"> ... </div>
<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

<div id=" "> ... </div>

<div id="results"> ... </div>
<div id="results"> ... </div>

<div id="container"> ... </div>

<div id="sampletext"> ... </div>
<div id="sample-text"> ... </div>
<div id="sample_text"> ... </div>
<div id="sample:text"> ... </div>
<div id="sample.text"> ... </div>

Dla klasy

Reguły dla klas są zasadniczo takie same jak dla id . Różnica polega na tym, że wartości class nie muszą być unikalne w dokumencie.

Odnosząc się do powyższych przykładów, chociaż nie jest to poprawne w tym samym dokumencie:

<div id="results"> ... </div>
<div id="results"> ... </div>

Jest to całkowicie w porządku:

<div class="results"> ... </div>
<div class="results"> ... </div>

Ważna uwaga: jak wartości identyfikatora i klasy są traktowane poza HTML

Pamiętaj, że powyższe zasady i przykłady obowiązują w kontekście HTML.

Używanie liczb, znaków interpunkcyjnych lub znaków specjalnych w wartości id lub class może powodować problemy w innych kontekstach, takich jak CSS, JavaScript i wyrażenia regularne.

Na przykład, mimo że następujący id jest poprawny w HTML5:

<div id="9lions"> ... </div>

... jest niepoprawny w CSS:

4.1.3 Znaki i wielkość liter

W CSS identyfikatory (w tym nazwy elementów, klasy i identyfikatory w selektorach) mogą zawierać tylko znaki [a-zA-Z0-9] i ISO 10646 znaków U + 00A0 i wyższe, a także myślnik (-) i podkreślenie ( _); nie mogą zaczynać się cyfrą, dwoma myślnikami ani myślnikiem, po których następuje cyfra . _{(podkreślenie dodane)}

W większości przypadków możesz uciec od znaków w kontekstach, w których mają one ograniczenia lub specjalne znaczenie.

Referencje W3C

• 3.2.5.1 Atrybut id
• 3.2.5.7 Atrybut class
• 6.2 Podstawowe typy SGML