Selektory atrybutów w CSS

1. Rodzaje selektorów atrybutów

Selektory atrybutów w CSS pozwalają wybierać elementy HTML na podstawie wartości ich atrybutów, takich jak id, class, name, type, i innych. Dają elastyczność i precyzję w wyborze elementów, co jest szczególnie przydatne w stylowaniu elementów formularzy, linków i innych elementów z unikalnymi atrybutami. W tym artykule omówimy różne typy selektorów atrybutów i ich zastosowanie.

Selektory atrybutów dzielą się na kilka kategorii, które pozwalają wybrać elementy na podstawie obecności atrybutu, jego dokładnej wartości lub jej części. Główne typy selektorów atrybutów:

1. Selektor atrybutu: wybiera elementy, które mają określony atrybut, niezależnie od jego wartości.
2. Selektor atrybutu z wartością: wybiera elementy z atrybutem, który jest równy określonej wartości.
3. Selektor atrybutu z początkową wartością: wybiera elementy, których wartość atrybutu zaczyna się od podanego prefiksu.
4. Selektor atrybutu z końcową wartością: wybiera elementy, których wartość atrybutu kończy się na określonym sufiksie.
5. Selektor atrybutu zawierającego wartość: wybiera elementy, których wartość atrybutu zawiera konkretny ciąg znaków.
6. Selektor atrybutu z podziałem na spacje: wybiera elementy z atrybutem, którego wartość zawiera określone słowo, oddzielone spacjami.
7. Selektor atrybutu z podziałem na myślniki: wybiera elementy z atrybutem, którego wartość zawiera określone słowo, oddzielone myślnikami.

2. Selektor atrybutu (Attribute Selector)

Selektor atrybutu wybiera elementy, które mają określony atrybut, niezależnie od jego wartości. Ten selektor jest przydatny, gdy trzeba wybrać wszystkie elementy z konkretnym atrybutem.

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

<input type="text">
<input type="password">
<input type="email">
<input>

W tym przykładzie wszystkie elementy <input> z atrybutem type otrzymują czarną ramkę, niezależnie od wartości tego atrybutu.

3. Selektor atrybutu z wartością

Selektor atrybutu z wartością wybiera elementy, których atrybut jest równy określonej wartości. Jest to przydatne, gdy trzeba wybrać elementy o konkretnej wartości atrybutu, na przykład wszystkie pola tekstowe lub linki otwierające się w nowej karcie.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Tylko pole tekstowe <input type="text"> otrzyma jasnoszare tło.

4. Selektor atrybutu z początkową wartością

Selektor atrybutu z początkową wartością wybiera elementy, których wartość atrybutu zaczyna się od podanego prefiksu. Prefiks podawany jest po symbolu ^=. Ten selektor jest przydatny na przykład do wybierania wszystkich linków prowadzących do konkretnej strony.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Link do strony example.com</a>
<a href="https://another.com">Inny link</a>
    
  

Tylko pierwszy link zostanie pokolorowany na zielono, ponieważ zaczyna się od "https://example.com".