Selektory atrybutowe

6.1 Rodzaje selektorów atrybutowych

Selektory atrybutowe w CSS pozwalają wybierać elementy na podstawie istnienia atrybutów, ich wartości lub części wartości atrybutów. Dają one elastyczne i potężne możliwości stylizacji elementów HTML, co czyni je szczególnie przydatnymi do pracy z dynamicznymi treściami i interaktywnymi stronami internetowymi.

Rodzaje selektorów atrybutowych

• Selektor atrybutu (Attribute Selector)
• Selektor atrybutu z wartością (Attribute Selector with Value)
• Selektor atrybutu z początkową wartością (Attribute Selector with Prefix)
• Selektor atrybutu z końcową wartością (Attribute Selector with Suffix)
• Selektor atrybutu zawierającego wartość (Attribute Selector with Substring)
• Selektor atrybutu z rozdzielaniem spacjami (Attribute Selector with Whitespace)
• Selektor atrybutu z rozdzielaniem myślnikiem (Attribute Selector with Hyphen)

6.2 Selektor atrybutu

Selektor atrybutu wybiera elementy, które mają określony atrybut, niezależnie od jego wartości.

Składnia:

    
      [atrybut] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, które mają atrybut title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="To jest nagłówek">Ten tekst będzie niebieski.</p>
      <p>Ten tekst nie będzie niebieski.</p>
    
  

6.3 Selektor atrybutu z wartością

Selektor atrybutu z wartością wybiera elementy, których atrybuty mają określoną wartość.

Składnia:

    
      [atrybut="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, których atrybut title ma wartość "Przykład" */
      [title="Przykład"] {
        color: green;
      }
    
  

    
      <p title="Przykład">Ten tekst będzie zielony.</p>
      <p title="Inny przykład">Ten tekst nie będzie zielony.</p>
    
  

6.4 Selektor atrybutu, gdzie wartość z prefiksem

Selektor atrybutu z początkową wartością wybiera elementy, których atrybuty zaczynają się od określonej wartości.

Składnia:

    
      [atrybut^="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, których atrybut title zaczyna się od "Początek" */
      [title^="Początek"] {
        color: red;
      }
    
  

    
      <p title="Początek tekstu">Ten tekst będzie czerwony.</p>
      <p title="Nie początek">Ten tekst nie będzie czerwony.</p>
    
  

6.5 Selektor atrybutu, gdzie wartość z sufiksem

Selektor atrybutu z końcową wartością wybiera elementy, których atrybuty kończą się na określoną wartość.

Składnia:

    
      [atrybut$="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, których atrybut title kończy się na "koniec" */
      [title$="koniec"] {
        color: orange;
      }
    
  

    
      <p title="To jest koniec">Ten tekst będzie pomarańczowy.</p>
      <p title="To jest początek">Ten tekst nie będzie pomarańczowy.</p>
    
  

6.6 Selektor atrybutu, zawierającego wartość-podciąg

Selektor atrybutu zawierającego wartość wybiera elementy, których atrybuty zawierają określoną wartość.

Składnia:

    
      [atrybut*="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, których atrybut title zawiera "środek" */
      [title*="środek"] {
        color: purple;
      }
    
  

    
      <p title="To jest środek tekstu">Ten tekst będzie fioletowy.</p>
      <p title="Nie ma środka tutaj">Ten tekst nie będzie fioletowy.</p>
    
  

6.7 Selektor atrybutu z separatorem spacji

Selektor atrybutu z rozdzielaniem spacjami wybiera elementy, których atrybut zawiera jedno lub więcej wartości, oddzielonych spacjami. Jest to przydatne do wybierania elementów z określonymi klasami lub rolami.

Składnia:

    
      [atrybut~="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      /* Wybiera wszystkie elementy, których atrybut class zawiera "highlight" w liście klas */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Ten tekst będzie z żółtym tłem.</p>
      <p class="special highlight">Ten tekst też będzie z żółtym tłem.</p>
      <p class="special">Ten tekst nie będzie z żółtym tłem.</p>
    
  

6.8 Selektor atrybutu z separatorem myślnika

Selektor atrybutu z rozdzielaniem myślnikiem wybiera elementy, których atrybut zawiera określoną wartość lub zaczyna się od określonej wartości, po której następuje myślnik.

Składnia:

    
      [atrybut|="wartość"] {
        właściwość: wartość;
        właściwość: wartość;
      }
    
  

Przykład:

    
      p[lang|="ru"] {
        font-style: italic;
      }
    
  

    
      <p lang="ru">Ten tekst będzie kursywą.</p>
      <p lang="ru-RU">Ten tekst też będzie kursywą.</p>
      <p lang="en">This text will not be italicized.</p>
    
  

1

Опрос

Podstawy CSS,  12 уровень,  6 лекция

недоступен

Podstawy CSS

Podstawy CSS

Открыть