Powrót do Dev Notes

wieloznaczne selektory CSS Wildcard Selectors

Wildcard Selectors czyli Selektory wieloznaczne pozwalają na wybranie w stylach nazw class lub id zawierających konkretne znaki, co umożliwia wygodniejsze przypisywanie styli, dzięki czemu selektory te zapewniają większą elastyczność podczas stylizacji elementów. Wyróżniamy tu znaki:

  • gwiazdka (*) pasuje do dowolnego znaku,
  • karetka (^) do początku,
  • znak dolara ($) do końca wartości atrybutu

Przykładowo pierwszy zapis doda kolor tła #FFA500 do wszystkich nazw które zaczynają się od 'new’, drugi przykład doda kolor tła do wszystkich elementów, których nazwa class zawiera ciąg 'new’ a ostatni doda kolor tła do wszystkich nazw które kończą się na 'new’.


div[class^="new"] {
  background: #FFA500;
}
div[class*="new"] {
  background: #FFA500;
}
div[class$="new"] {
  background: #FFA500;
}