Ostatnio edytowany:

Selektor typu atrybutu

Autor: Virtual Patriot

Przeznaczenie selektora [A]

      [atrybut] { ... }
    

Selektor typu atrybutu odszukuje każdy element HTML, który posiada atrybut HTML podanego przez nas typu.

Selektor typu atrybutu tworzymy za pomocą nawiasu kwadratowego [], w którym należy umieścić nazwę interesującego nas atrybutu HTML.

Dodatkowe techniczne informacje o selektorze [A]

ograniczenie - elementy HTML

brak

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor [A]

[title] {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      [title] { color:red; }
    
[title]

Do każdego elementu HTML, który posiada atrybut title

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>
      [title] {
        color:red;
      }
    </style>
  </head>

  <body>

    <div title="opis przykładowego elementu HTML">
      tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "title"
    </div>

    <p id="lipiec" title="lato">
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ jednym z atrybutów tego elementu HTML jest atrybut "title"
    </p>

    <div class="czerwiec">
      tekst znajdujący się w zawartości tego elementu "div" nie jest koloru czerwonego, ponieważ ten element HTML nie posiada atrybutu "title"
    </div>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "div" jest koloru czerwonego, ponieważ ten element HTML posiada atrybut "title"

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ jednym z atrybutów tego elementu HTML jest atrybut "title"

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

Interpretacja selektora [A]

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak