Deo zbornika Uvod u web

Selektori atributa

Pomoću selektora atributa možemo birati elemente na osnovu naziva i vrednosti njihovih atributa.

Po nazivu atributa

Možemo selektovati elemente po nazivu atributa. Na primer, onemogućene elemente biramo na sledeći način:

[disabled] {
  color: lightgray;
}

Da bismo selektovali samo onemogućene dugmiće, dodajemo i naziv elementa:

button[disabled] {
  color: lightgray;
}

Atribut koji sadrži frazu

*= selektuje atribut koji sadrži određenu frazu. Na primer linkove čija putanja sadrži reč “vezba”:

a[href*="vezba"] {
  color: black;
}

Atribut koji sadrži celu reč

~= selektuje atribut koji sadrži celu reč, samu ili odvojenu razmakom. Na primer, ovako biramo elemente koji sadrže klasu error:

[class~="error"] {
  color: red;
}

Ovako biramo alt atribut koji sadrži reč popust:

[alt~="popust"] {
  color: red;
}

Atribut koji počinje frazom

^= selektuje atribut koji počinje određenom frazom. Na primer, ovako biramo sve linkove koji vode na sigurni protokol:

a[href^="https"] {
  color: green;
}

Atribut koji se završava frazom

$= selektuje atribut koji se završava određenom frazom. Na primer, ovako biramo linkove čija se putanja završava na .com:

a[href$=".com"] {
  color: blue;
}

Doslovna vrednost atributa

= selektuje atribut koji ima tačno određenu vrednost. Na primer, ovako selektujemo link ka nekoj stranici:

a[href="http://neka-stranica.com"] {
  color: black;
}

Ili sva input polja brojčanog tipa:

input[type="number"] {
  border: 1px solid black;
}

Primeri

<style>
  button[disabled] {
    color: lightgray;
  }

  [class~="error"] {
    color: red;
  }

  a[href^="https"] {
    color: green;
  }
</style>

<button disabled>Potvrdi</button>

<p class="text error">Niste popunili sva polja.</p>

<a href="https://skolakoda.org">Ovaj link sadrži sigurni protokol.</a>