CSS Izbirniki Atributov

Izbirnik atributov ujema elemente na podlagi elementa, ki ima dani atribut izrecno nastavljen, z možnostmi za definiranje vrednosti atributa ali ujemanja vrednosti podniza. Občutljivost imen in vrednosti atributov na velike in male črke je odvisna od jezika dokumenta. V HTML-ju imena atributov ne razlikujejo med velikimi in malimi črkami, prav tako kot specificirano definirane oštevilčene vrednosti. Za te atribute vrednost atributa v izbirniku ne razlikuje med velikimi in malimi črkami, ne glede na to, ali je vrednost neveljavna ali je atribut za element, na katerega je nastavljen, neveljaven. Če vrednost atributa razlikuje med velikimi in malimi črkami, kot so atribut class, id in data-*, ujemanje vrednosti izbirnika atributa razlikuje med velikimi in malimi črkami.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <style>
        /* Osnovni izbirnik atributa izbere vse elemente z določenim atributom. */
        [title] {
            border: 2px solid #4CAF50;
            padding: 5px;
            margin: 5px;
        }

        /* Izbirnik z natančno vrednostjo izbere elemente, kjer je atribut enak vrednosti. */
        [type="text"] {
            background-color: #f0f8ff;
        }

        /* Izbirnik, ki vsebuje besedo izbranega elementa, kjer atribut vsebuje določeno besedo. */
        [class~="posebno"] {
            font-weight: bold;
            color: #2196F3;
        }

        /* Izbirnik, ki se začne z izbranim elementom kjer se atribut začne z določeno vrednostjo. */
        [class^="btn-"] {
            background-color: #ff9800;
            color: white;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
        }

        /* Izbirnik, ki se konča z izbranimi elementi kjer se atribut konča z določeno vrednostjo. */
        [class$="-info"] {
            border-bottom: 2px dotted #2196F3;
        }

        /* Izbirnik, ki vsebuje izbrane elemente kjer atribut vsebuje določeno vrednost kjerkoli. */
        [href*="example"] {
            color: #e91e63;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <!-- Element s title atributom -->
        <p title="Namig">Ta odstavek ima title atribut.</p>

        <!-- Input polje s type atributom -->
        <input type="text" placeholder="Vnosno polje">

        <!-- Element s class atributom, ki vsebuje besedo "posebno" -->
        <p class="text posebno">Ta odstavek ima class z besedo "posebno".</p>

        <!-- Gumbi, katerih class se začne z "btn-" -->
        <button class="btn-primary">Primarni gumb</button>
        <button class="btn-secondary">Sekundarni gumb</button>

        <!-- Element, katerega class se konča z "-info" -->
        <div class="text-info">To je informativno besedilo.</div>

        <!-- Povezava, ki vsebuje "example" v href atributu -->
        <a href="#">Povezava</a>
    </div>
</body>
</html>

REZULTAT

V tem primeru so prikazane različne možnosti izbirnikov atributov. Primer vsebuje vnosno polje, gumbe, besedilo in povezave, na katerih so uporabljeni različni izbirniki atributov:

Prvi odstavek je izbran z [title] in ima zato zeleno obrobo
Vnosno polje je izbrano z [type="text"] in ima svetlo modro ozadje
Besedilo z razredom "posebno" je izbrano z [class~="posebno"] in je odebeljeno ter modre barve
Gumbi, ki se začnejo z "btn-", so izbrani z [class^="btn-"] in imajo oranžno ozadje
Element z razredom, ki se konča z "-info", je izbran z [class$="-info"] in ima pikčasto modro črto spodaj
Povezava, ki vsebuje "example", je izbrana z [href*="example"] in je rožnate barve

S tem primerom lahko vidimo, kako različni izbirniki atributov delujejo v praksi in kako jih lahko uporabljate za oblikovanje elementov na podlagi njihovih atributov.

Izbirniki atributov v CSS-u nam omogočajo izbiro elementov na podlagi njihovih atributov ali vrednosti atributov. So izjemno uporabni, ko želimo oblikovati elemente, ki imajo določene lastnosti, ne da bi jim dodajali posebne razrede ali ID-je. Poznamo več vrst izbirnikov atributov:

Osnovni izbirniki atributov:

[atribut]	Se uporablja za izbiro elementov z navedenim atributom.	Glej primer
[atribut="vrednost"]	Se uporablja za izbiro elementov z navedenim atributom in vrednostjo.	Glej primer
[atribut~="vrednost"]	Se uporablja za izbiro elementov z vrednostjo atributa, ki vsebuje določeno besedo.	Glej primer
[atribut\|="vrednost"]	Se uporablja za izbiro elementov z navedenim atributom, ki se začnejo s podano vrednostjo.	Glej primer
[atribut^="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa se začne z določeno vrednostjo.	Glej primer
[atribut$="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa se konča z določeno vrednostjo.	Glej primer
[atribut*="vrednost"]	Se ujema z vsakim elementom, katerega vrednost atributa vsebuje določeno vrednost.	Glej primer

Praktična uporaba:

oblikovanje vnosnih polj glede na njihov tip: [type="text"], [type="checkbox"]
Stiliziranje povezav glede na njihov cilj: [href^="https://"], [href$=".pdf"]
Prilagajanje elementov z določenimi podatkovnimi atributi: [data-tip="opozorilo"]
Oblikovanje elementov z določenimi jezikovnimi atributi: [lang="sl"]

Prednosti uporabe:

Večja fleksibilnost pri izbiri elementov.
Zmanjšanje potrebe po dodatnih razredih.
Boljša semantična struktura HTML-ja.
Lažje vzdrževanje kode.
Možnost kombiniranja z drugimi izbirniki za še natančnejše ciljanje elementov.

Izbirniki atributov so posebej uporabni pri:

Razvoju obrazcev in njihovih elementov.
Oblikovanju navigacijskih elementov.
Prilagajanju vsebine glede na jezik.
Stiliziranju povezav glede na njihov tip.
Upravljanju z zunanjimi in notranjimi povezavami.