Selektory atrybutów

Selektory atrybutów w CSS umożliwiają wybieranie elementów HTML na podstawie ich atrybutów i wartości tych atrybutów. Są one zapisywane w nawiasach kwadratowych po nazwie selektora.elektory atrybutów są przydatne w sytuacjach, gdy potrzebujemy zastosować styl do elementów o określonym atrybucie lub wartości atrybutu. Przykłady selektorów atrybutów:

[attribute] Wybieranie elementów o określonym atrybucie

										
input[type] {
  padding: 10px;
  margin: 20px;

}

[attribute = value] Wybieranie elementów z określoną wartością atrybutu

										
input[type="text"] {
  width: 300px;
  height: 40px;
  font-size: 16px;
}

[attribute ~= value] Wybieranie elementów, których wartość atrybutu zawiera określony ciąg znaków

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

[attribute *= value] Wybieranie elementów, których wartość atrybutu zawiera określony ciąg znaków

								
input[type*="text"] {
  border-radius: 10px;
  box-shadow: 2px 2px 5px gray;
}

[attribute ^= value] Wybieranie elementów, których wartość atrybutu zaczyna się od określonego ciągu znaków

										
input[type^="text"] {
  text-align: center;
}

[attribute $= value] Wybieranie elementów, których wartość atrybutu kończy się określonym ciągiem znaków

										
input[type$="text"] {
  font-weight: bold;
}

[attribute |= value] Wybieranie elementów, których wartość atrybutu zaczyna się od określonego ciągu znaków lub jest równa temu ciągowi znaków z podanym znakiem separatora (np. "-")

										
input[type|="text"] {
  background-color: lightgray;
}