Selektory

Przypomnijmy sobie, że są to zwykłe elementy HTML, do których odnosi się informacja o stylach. Jednak możemy być bardziej dokładni...

Tworzenie klas

Przez przypisanie elementom klas możesz używać nazw klas, aby określić styl:
  <STYLE TYPE="text/css">
    H1.classname { ..... }
    .class2  {informacja o stylu dla wszystkich elementów o klasie class=class2}
  </STYLE>
.....
  <H1 CLASS=classname>Ten tekst będzie określony przez powyższą informację o stylu.</H1>
  <H2 CLASS=class2>Także i ten tekst</H1> 
 

Tworzenie identyfikatora ID

Możliwe jest użycie atrybutu id dla określenia informacji o stylu. Element jest identyfikowany przez umieszczenie kodu ID=NameOfYourChoice w otwierającym tagu. Informacja o stylu jest wtedy wyrażana przez użycie formy elementname#ID_Name { .... }
Przykład:
<STYLE> 
	#id1 { color:green}	(cały tekst w dowolnym elemencie z identyfikatorem ID=id1 będzie zielony)
	H1#id2 { color:blue}	(wszystkie elementy H1 z ID=id2 są niebieskie)
</STYLE>
.....
  <P ID=id1>zielony tekst</P>
  <H2 ID=id2>niebieski tekst</h2>

Selektor kontekstowy

Możesz ustalić, że styl będzie nadawany jedynie tym elementom, które mają pewnych "przodków" (elementy, w których są zawarte). W CSS2 selektor kontekstowy nosi nazwę selektora potomka (descendant selector)
n.p.
  H1 EM { styleinfo }; 		/* cały tekst w EM w ramach tagu H1 */
  UL UL LI { styleinfo };	/* wszystkie elementy LI w ramach dwóch definicji wykazów UL */
  .classname H1 { styleinfo };	/* cały tekst H1 zawarty w elementach z CLASS=classname */
  #IDname H1 { styleinfo };	/* cały tekst H1 w ramach elementów z ID=IDname */
  DIV.IDname H1 { styleinfo };	/* cały tekst H1 w ramach tagów DIV z ID=IDname */

Selektor uniwersalny

Wartości uniwersalne możemy nadawać na poziomie BODY albo stosując uniwersalny selektor z gwiazdką:
* { color : red } /* cały tekst będzie czerwony */
*.classname {color : red } /* wszystkie elementy o klasie classname będą czerwone */
H1 * PRE { color:red } /* wszystkie bloki PRE zawarte w H1 będą czerwone */

Selektor dziecka

Element jest dzieckiem w stosunku do innego elementu, jeśli jest w nim zawarty i jest o jeden szczebel niżej w hierarchii. Na przykład, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest dzieckiem H3, a nie H1. Jeśli chcemy , aby wszystkie H3, które są dzieckiem w stosunku do H1, były czerwone, użyjemy
H1 > H3 { color : red }

Elementy przystające

Aby określić styl dla elementów H3, które bezpośrednio następują po H1, użyj kodu H1 + H3 { color : red }.

Wpłynie to na <H1>...</H1> <H3>ten tekst</H3>

Selektor atrybutów

Style możemy nadawać elementom, które mają określone wartości jakichś atrybutów. Ogólna forma ma postać
elementname[attribute relationship value] { styleinfo }
,gdzie relationship jest jednym z Przykłady :
 H1[id="the top heading"] {color : red}
 H1[id~=top] {color : red}
Powyższe style miałyby ten sam efekt w <H1 id="the top heading">

Pseudoklasy

Pseudoklasy odsyłaczowe

Styl może być nadany trzem typom odsyłaczy (normal, visited, active), jak pokazują następujące przykłady...
  A:link { styleinfo }         /* odsyłacz nie odwiedzany */
  A:visited {styleinfo }   /* odsyłacz odwiedzony */
  A:active { styleinfo }    /* odsyłacz aktywny */
  A:link IMG { styleinfo } /* wszystkie IMG, które są częścią odsyłacza nie odwiedzanego */
  A.classname:visited { styleinfo } /* odwiedzone odsyłacze z klasą CLASS=classname */

Pseudoklasa :Hover

Selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nam elementem. Styl może być "nadpisany", jeśli po :hover znajduje się np. styl :link.
Example : a:hover {color: rgb(100%,0%,100%) }

Pseudoklasa :Active

Styl jest nadawany wtedy, gdy element staje się aktywny, np. w czasie między naciśnięciem przycisku i zwolnieniem go.
Przykład : a:active {color: rgb(100%,0%,100%) }

Pseudoklasa :Focus

Element przyjmuje fokus (zogniskowanie), gdy zostanie wybrany przez kliknięcie myszką czy skrót klawiszowy albo jest taki ze definicji. Po przyjęciu fokusu element reaguje na klawiaturę lub inne zdarzenia, np. na wpisywanie czegoś w polu tekstowym. textinput:focus {color: rgb(100%,100%,100%) }

Pseudoklasa językowa

Przykład : h1:lang(en) {color:blue}
Kod ten definiuje styl dla elementów, którym nadano definicję języka za pomocą atrybutu HTML lang=. Powyższy przykład dotyczy języka angielskiego i wpływa np. na <H1 lang=en>ten tekst</H1>

Pseudoklasa First Child

Element jest dzieckiem w stosunku do innego elementu, jeśli jest zawarty w jego ramach i jest o jeden szczebel niżej w hierarchii. Jest także pierwszym dzieckiem, jeśli jest w nim pierwszym elementem. Na przykład, w <H1> <H2></H2> <H3></H3></H1>, H2 jest pierwszym dzieckiem H1, ale H3 jest już drugim dzieckiem. W przykładzie, aby wybrać H2, użylibyśmy
H1 > H2:firstchild {styleinfo}
lub H2:firstchild {styleinfo}

Pseudoelementy

Pseudoelement first-line

    P:first-line { styleinfo }  /* pierwszy wiersz tekstu dla każdego wystąpienia tego elementu */
Pseudoelement 'first-line' może być używany jedynie w elementach blokowych i mogą mu być nadawane jedynie następujące typy własności : font, color, background properties, word-spacing , letter-spacing , text-decoration , vertical-align, text-transform , line-height, clear.

Pseudoelement first-letter

Pseudoelement 'first-letter' może mieć następujące własności: font, color, background, 'text-decoration' , 'vertical-align (jeśli 'float' jest 'none'), 'text-transform' , 'line-height' , margins, padding, border, 'float' , 'clear' Aby utworzyć opuszczoną literę (dropcap), obejmującą dwa wiersze:
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }
Przeglądarka określa, jakie znaki znajdują się wewnątrz elementu 'first-letter'. Normalnie, apostrofy i cudzysłowy poprzedzające pierwszą literę powinny być także obejmowane. W przeciwnym razie informacja o stylu zostanie zignorowana, jeśli blok zaczyna się od znaku nie będącego literą lub cyfrą.

Własności ustalone dla 'first-line' są dziedziczone przez 'first-letter', ale są nadpisywane, jeśli ta sama własność jest zdefiniowana w 'first-letter'.

Dodawanie content :before i :after

Poniższy kod dodaje (automatycznie generuje) tekst przed i po zawartości określonego elementu.
p:before {content : "Początek akapitu"}
p:after {content : "Koniec akapitu"}

content

Wartość contentstring | address | counter | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote | inherit
Używany z :before i :after
Dziedziczenie nie

Własność generuje określoną treść przed (:before) i za (:after) elementem. string to tekst, address to zwykle internetowy adres URL, counter jest opisany poniżej i w innych miejscach tego przewodnika, quotes to odpowiednie symbole apostrofów i cudzysłowów a no-quotes działa tak, jakby cudzysłów lub apostrof został zamknięty. attr( ) nadaje wartość określonemu atrybutowi.

Liczniki są wyświetlane razem z własnością content pseudoelementów :before i :after.