• selektor elementu – element selector
  

to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka:

h1 {color: blue;}
p {text-align: left;}
div {background-color: grey;}

• selektor uniwersalny – universal selector
  

„*” pozwala ustalić określone cechy dla wszystkich elementów strony niezależnie czy są to <p>, <h1>, <div> czy jakikolwiek inny:

* {
  color: blue;
  text-align: left;
  background-color: black;
}

powyższy zapis oznacza, że wszystkie elementy na stronie mają mieć niebieski tekst wyrównany do lewej oraz czarne tło.

• selektor grupujący – grouping selector

Selektor grupujący organizuje wszystkie elementy z tym samym stylem np.

h1 {
  color: blue;
  text-align: left;
  background-color: black;
}

p {
color: blue;
text-align: left;
background-color: black;
}

span {
color: blue;
text-align: left;
background-color: black;
}

elementy h1, p i span mają w powyższym przykładzie mają takie same style, możemy więc je „scalić”, oddzielając poszczególne elementy przecinkami:

h1, p, span {
  color: blue;
  text-align: left;
  background-color: black;
}

• selektor identyfikatora – id selector

Selektor identyfikatora wykorzystuje atrybut id elementu HTML do wyszczególnienia konkretnego elementu.

Id elementu jest unikalny w obrębie strony, więc selektor id jest używany do wybrania jednego unikalnego elementu!

Aby wybrać element o określonym id, należy wpisać znak skrótu (#), a następnie id elementu.

w pliku css dodajemy zapis:

#niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p id="niebieski">ta treść będzie w kolorze niebieskim</p>

Określony przez id styl tyczy się tylko tego elementu, który ma przypisany id=”nazwa”.

Nazwy id nie mogą zawierać polskich znaków i zaczynać się od cyfr.

• selektor klasy – class selector

Selektor klasy wykorzystuje atrybut class elementu HTML do wyszczególnienia konkretnego elementu.

Klasa elementu nie jest unikalna w obrębie strony, więc selektor class może być używany wielokrotnie na stronie do różnych elementów!

Aby wybrać element o określonej klasie, należy wpisać znak skrótu (.), a następnie klasę elementu.

w pliku css dodajemy zapis:

.niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p class="niebieski">ta treść będzie w kolorze niebieskim</p>
<h1 class="niebieski">ten element też będzie miał kolor niebieski</h1>

Określony przez class styl tyczy się tylko każdego elementu, który ma przypisany class=”nazwa”.

Nazwy klas nie mogą zawierać polskich znaków i zaczynać się od cyfr.

Ćwiczenie:

W pliku, który rozbudowujesz na lekcjach, zastosuj poznane selektory:

1) za pomocą selektora uniwersalnego zmień tło i kolor czcionki dla strony

2) używając selektora grupującego, ustaw dla znaczników list i definicji kolor czcionki (inny niż dla całości strony)

3) ustaw id zmieniające tło dla znacznika <main>, który zastosuj poniżej <nav> (znacznik <main> ma obejmować treść na stronie poza <header> i <footer>)

4) zastosuj klasę, która zmieni kolor czcionki w nagłówkach występujących na stronie