Ostatnio edytowany:

Selektor typu elementu

Autor: Virtual Patriot

Przeznaczenie selektora typu elementu

      element { ... }
    

Selektor typu elementu odszukuje każdy element HTML podanego przez nas typu.

Selektor typu elementu tworzymy za pomocą nazwy interesującego nas elementu HTML.

Dodatkowe techniczne informacje o selektorze typu elementu

ograniczenie - elementy HTML
  • brak
ograniczenie - właściwości CSS
  • brak

Przykładowa reguła CSS, selektor typu elementu

p {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p { color:red; }
    
p

Do każdego elementu HTML typu p

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p {
        color:red;
      }
    </style>
  </head>

  <body>

    <div>
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem HTML typu "p"
    </div>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem HTML typu "p"
    </p>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem HTML typu "p"
    </p>

    <div>
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem HTML typu "p"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem HTML typu "p"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem HTML typu "p"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ ten element HTML jest elementem HTML typu "p"

tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie jest elementem HTML typu "p"

Interpretacja selektora typu elementu

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak