Selektory elementów


Selektor elementu

Selektor elementu – tworzymy za pomocą nazwy elementu HTML. Selektor odwołuje się do każdego elementu o podanej nazwie.

Wzór selektora elementu

element { cecha: wartość; }

Przykładowa reguła CSS – selektor elementu

 p { color:red; }

Objaśnienie przykładowej reguły CSS

Oznaczenie Znaczenie
p Do każdego elementu p w danym dokumencie HTML
color dodaj właściwość, która zmieni kolor tekstu
red na czerwony

Przykładowy dokument HTML, w którym został użyty selektor elementu

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8">  
        <title>CSS</title> 
        <link rel="Stylesheet" type="text/css" href="style.css" />         
    </head> 
    <body> 
        <div>
            ten element - div - nie posiada czerwonego koloru tekstu, 
            ponieważ tylko elementy - p - w tym dokumencie HTML będą 
            posiadały czerwony kolor tekstu</div> 
            <p>ten element - p - posiada czerwony kolor tekstu</p> 
            <p>ten element - p - również posiada czerwony kolor tekstu</p> 
            <span>ten element - span - nie posiada czerwonego koloru tekstu, 
            ponieważ nie jest on elementem - p</span> 
    </body> 
</html>
Plik style.css
p { color:red; }

Rezultat po wyświetleniu dokumentu HTML

ten element – div – nie posiada czerwonego koloru tekstu, ponieważ tylko elementy – p – w tym dokumencie HTML będą posiadały czerwony kolor tekstu

ten element – p – posiada czerwony kolor tekstu

ten element – p – również posiada czerwony kolor tekstu

ten element – span – nie posiada czerwonego koloru tekstu, ponieważ nie jest on elementem – p

Interpretacja selektora elementu

Przeglądarki Interpretacja
Firefox tak
Chrome tak
Safari tak
Opera tak
IE tak
Selektor istnieje od specyfikacji CSS1

 

Drzewo dokumentu i dziedziczenie

Drzewo elementów umieszczonych w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root).

Jeżeli nasza strona ma następującą strukturę:

<html>
	<head>
		<title>...</title>
	</head>
	<body>
		<h1>...</h1>
		<p>...</p>
		<table>
			<tr>
				<td>...</td>
				<td>...</td>
			</tr>
			<tr>
				<td>...</td>
				<td>...</td>
			</tr>
		</table>
	</body>
</html>

to jej drzewo wygląda następująco:

Drzewo dokumentu

gdzie:

  • Element TABLE jest dzieckiem elementu BODY.
  • Element TABLE jest potomkiem elementu HTML oraz BODY.
  • Element TABLE jest rodzicem dwóch elementów TR.
  • Element TABLE jest przodkiem czterech elementów TD oraz dwóch TR.
  • Element TABLE jest bratem elementów H1 oraz P.
  • Elementy H1 oraz P są braćmi poprzedzającymi elementu TABLE.
  • Element TABLE jest bratem następującym elementów H1 oraz P.
  • Element TABLE jest elementem poprzedzającym elementu TR oraz TD.
  • Element TABLE jest elementem następującym elementu BODY oraz HTML.

Elementy leżące niżej w hierarchii drzewa dokumentu, zawierają się wewnątrz znaczników nadrzędnych, np. znaczniki <body> oraz </body> muszą być umiejscowione pomiędzy znacznikami <html> i </html>, które są nadrzędne dla wszystkich innych (root).

 

Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom.

 

Rodzaje selektorów elementów:

  • selektor typu

  • selektor uniwersalny

  • selektor potomka

  • selektor dziecka

  • selektor braci

  • ogólny selektor braci

  • grupowanie selektorów

 

Ćwiczenia:

Wykorzystując poniższy kod, Twoim zadaniem jest:

<body>

  <div>to jest element - div</div>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <div>to jest element - div</div>

</body>

1) dodanie właściwości color:red; do wszystkich elementów p, które znajdują się w elemencie body.

2) dodanie właściwości color:red; do wszystkich elementów p, jak również do wszystkich elementów div, które znajdują się w elemencie body.

 

Wykorzystując poniższy kod, Twoim zadaniem jest:

<p>To jest akapit, wewnątrz którego znajduje się: <i>pochylenie </i>, 
<tt>dalekopis</tt> oraz <b>pogrubienie </b>... następne <b>pogrubienie </b>. 
A to jest <i><b>pogrubienie </b> wewnąrz pochylenia </i>. 
Tutaj kończy się akapit.</p>

1) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz znacznika p (akapit), niekoniecznie bezpośrednio, znajdzie się znacznik b (czyli pogrubienie tekstu)

2) dodanie właściwości color:red; dla pogrubienie jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu)

3) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b

4) dodanie właściwości color:red; dla wszystkich pogrubień jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b