Witryny aplikacji internetowych - Selektory

1. Selektor to dowolny fragment HTMLa, dla którego chcemy zdefiniować parametry formatowania.

2. Selektory elementów:
  • selektor typu - podstawowy typ selektora, służy do definiowania formatowania znaczników występujących na stronie. 
np. p {color: blue; font-size: 4pt;}
  • selektor uniwersalny - selektor pasujący do wszystkich znaczników. Jest oznaczony gwiazdką(*)
np. zamiast grupować elementy można użyć: *{font-family: courier new;}
  • selektor potomka - przy użyciu tego typu selektora można formatować elementy, które są zawarte wewnątrz innych znaczników, czyli leżą niżej w hierarchii drzewa dokumentu
np. ol ul {color: red}  // jeśli "ul" będzie w znaczniku "ol" wtedy zostanie sformatowane
  • selektor dziecka - służy do definiowania elementów, które znajdują się się o jeden rząd niżej w hierarchii drzewa dokumentu. (postać: rodzic > dziecko {właściwość: wartość;} Znacznik będący dzieckiem musi wystąpić bezpośrednio wewnątrz znacznika nadrzędnego.
np.  p>b {color: red} 
  • selektor braci - dla elementów znajdujących się w tym samym rzędzie hierarchii, umożliwia nadanie drugiemu z sąsiadujących elementów zdefiniowanych atrybutów formatowania (nadobowiązkowy na sprawdzian) 
3. Selektory atrybutów stosuje się po to, aby móc formatować znaczniki na podstawie posiadanych przez nie atrybutów. Na przykład, gdy mamy znacznik <p> (akapit) i zostanie dla niego zdefiniowany atrybut align (wyrównanie), to inaczej będzie wyświetlany akapit wyrównany do lewej, a inaczej akapit wyśrodkowany. 
  • prosty selektor atrybutu - wykorzystywany jest dla elementów o nadanym określonym atrybucie, którego wartość nie ma znaczenia. Postać: selektor [atrybut]{właściwość: wartość;}
np. p [title] {border: 2px solid #00ff00; width: 100px}
  • selektor atrybutu o określonej wartości - określa formatowanie, gdy atrybut ma określoną wartość. Postać: selektor [atrybut="wartość"] {właściwość: wartość;}
np. [title="Moja wyczyszczona toaleta"] {font-style: italic;}

4. Selektory specjalne:
  • selektor klasy - stosujemy wtedy kiedy chcemy zastosować pewien styl formatowania do jednej grupy elementów, a do drugiej inny (tworzymy wtedy klasę i definiujemy dla niej styl). Postać: selektor.klasa {właściwość: wartość;} / selektor klasy uniwersalnej .klasa {właściwość: wartość;}
np. p.morski {color: aqua} // .szary {color: grey} 

5. Pseudoklasy - używa się wtedy, gdy chcemy, aby element nabywał styl lub tracił go, w związku z działaniem użytkownika lub zmieniać się w zależności od umiejscowienia.

Linki mają właściwości, które określają działanie użytkownika: Są to:
  • :active - link odwiedzany, strona jest aktualnie wczytana (selected link)
  • :link - link nieaktywny, nie został przez użytkownika odwiedzony (unvisited link)
  • :visited - link odwiedzony, strona była otwierana (visited link)
  • :hover - link gotowy do kliknięcia, kursor myszy ustawiony nad linkiem. (mouse over link)
np. 
a: active {
color: red;
}