CSS3 - Selektori atributa (Attribute Selectors)

Razumijevanje selektora atributa

Selektori atributa CSS pružaju jednostavan i moćan način primjene stilova na HTML elemente na osnovu prisutnosti određenog atributa ili vrijednosti atributa. Selektor atributa možete stvoriti stavljanjem atributa po želji s vrijednošću u par uglastih zagrada. Prije njega možete postaviti i selektor tipa elementa. Sljedeći dio opisuju najčešće selektore atributa.


CSS [attribute] Selektor

Ovo je najjednostavniji oblik selektora atributa koji primjenjuje pravila stila na element ako dati atribut postoji. Na primjer, možemo stilizovati sve elemente koji imaju atribut naslova pomoću sljedećih pravila stila: 

[title] {
    color: blue;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
    [title] {
        color:blue;
    }
</style>
</head>
<body>
    <h1 title="heading">Attribute Selektor</h1>
    <p title="paragraph">Boja ovoga paragrafa biće crvena.</p>
</body>
</html>

Selektor [title] u gornjem primjeru odgovara svim elementima koji imaju atribut title. Takođe možete ograničiti ovaj odabir na određeni HTML element postavljanjem selektora atributa nakon selektora tipa elementa, poput ovog: 

abbr[title] {
    color: red;
}

Selektor abbr[title] podudara se samo s <abbr> elementima koji imaju atribut title, tako da se podudara sa karticom, ali ne i sidrenim elementima koji imaju atribut title.


CSS [attribute="value"] Selektor

Pomoću operatora = možete napraviti da se selektor atributa podudara s bilo kojim elementom čija je vrijednost atributa tačno jednaka datoj vrijednosti: 

input[type="submit"] {
    border: 1px solid green;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
    input[type="text"] {
        border:1px solid red;
    }
    input[type="submit"] {
        border:1px solid green;
    }
</style>
</head>
<body>
    <form>
        <input type="text">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Selektor u gornjem primjeru podudara se sa svim elementom <input> koji ima atribut tipa s vrijednošću jednakom za slanje.


CSS [attribute~="value"] Selektor

Pomoću operatora ~= možete napraviti da se selektor atributa podudara sa bilo kojim elementom čija je vrijednost atributa lista razmaknutih vrijednosti (poput class="alert warning"), od kojih je jedna potpuno jednaka navedenoj vrijednosti: 

[class~="warning"] {
    color: #fff;
    background: red;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
    [class~="warning"] {
    color: #fff;
        background: red;
    }
</style>
</head>
<body>
    <p class="warning">Stil će se primijeniti na ovaj paragraf.</p>
    <p class="warning highlight">Stil će se primijeniti i na ovaj paragraf.</p>
    <p class="highlight">Stil se neće primjeniti na ovaj paragraf.</p>
</body>
</html>

Ovaj selektor se podudara sa bilo koji HTML element s atributom klase koji sadrži vrijednosti odvojene razmakom, od kojih je jedna upozorenje. Na primjer, podudara se s elementima koji imaju vrijednosti klase: warning, alert warning itd.


CSS [attribute|="value"] Selektor

Pomoću operatora |= možete napraviti da se selektor atributa podudara sa bilo kojim elementom čiji atribut ima odvojenu listu vrijednosti crticom koja počinje s navedenom vrijednošću: 

[lang|=en] {
    color: #fff;
    background: blue;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Primjer attribute selektora</title>
  <style>
    p[lang|=en] {
        color: #fff;
      background: blue;
    }
  </style>
</head>
<body>
  <p lang="en">Stil će se primijeniti na ovaj paragraf.</p>
  <p lang="en-us">Stil će se primijeniti i na ovaj paragraf.</p>
  <p lang="us">Stil se neće primjenjivati na ovaj paragraf.</p>
</body>
</html>

Selektor u gornjem primjeru podudara se sa svim elementima koji imaju atribut lang koji sadrži vrijednost koja počinje s en, bez obzira slijedi li tu vrijednost crticu i više znakova. Drugim riječima, podudara se s elementima s atributom lang koji ima vrijednosti: en, en-US, en-GB itd., ali ne i US-en, GB-en.


CSS [attribute^="value"] Selektor

Pomoću operatora ^= možete napraviti da se selektor atributa podudara s bilo kojim elementom čija vrijednost atributa počinje s navedenom vrijednošću. To ne mora biti cijela riječ. 

a[href^="http://"] {
    background: url("external.png") 100% 50% no-repeat;
    padding-right: 15px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
    a[href^="http://"] {
        background: url("/examples/images/external.png") 100% 50% no-repeat;
        padding-right: 15px;
    }
</style>
</head>
<body>
    <p><a href="http://www.google.com" target="_blank">Google</a></p>
</body>
</html>

Selektor u gornjem primjeru ciljaće sve vanjske veze (linkove) i dodati malu ikonu koja ukazuje da će se one otvoriti u novoj kartici ili prozoru.


CSS [attribute$="value"] Selektor

Slično tome, pomoću operatora $= možete odabrati sve elemente čija vrijednost atributa završava navedenom vrijednošću. To ne mora biti cijela riječ. 

a[href$=".pdf"] {
    background: url("pdf.png") 0 50% no-repeat;
    padding-left: 20px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
  a[href$=".pdf"] {
    background: url("/examples/images/pdf.png") 0 50% no-repeat;
    padding-left: 20px;
  }
</style>
</head>
<body>
  <p><a href="/examples/downloads/masters.pdf">Download PDF</a></p>
</body>
</html>

Selektor u gornjem primjeru bira sve <a> elemente koji povezuju PDF dokument i dodaje malu PDF ikonu kako bi pružio savjete korisniku o vezi.


CSS [attribute*="value"] Selektor

Pomoću operatora *= možete napraviti da se selektor atributa podudara sa svim elementima čija vrijednost atributa sadrži navedenu vrijednost. 

[class*="warning"] {
    color: #fff;
    background: red;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer attribute selektora</title>
<style>
    [class*="warning"] {
        color: #fff;
        background: red;
    }
</style>
</head>
<body>
    <p class="warning">Stil će se primijeniti na ovaj paragraf.</p>
    <p class="alert warning">Stil će se primijeniti i na ovaj paragraf.</p>
    <p class="alert-warning">Stil će se primijeniti i na ovaj paragraf.</p>
    <p class="alert_warning">Stil će se primijeniti i na ovaj paragraf.</p>
    <p class="highlight">Stil se neće odnositi na ovaj paragraf.</p>
</body>
</html>

Ovaj selektor u gornjem primjeru podudara sve HTML elemente s atributom klase čija vrijednosti sadrži upozorenje (warning). Na primjer, podudara se s elementima koji imaju vrijednosti klase: warning, alert warning, alert-warning ili alert_warning itd.


Oblikovanje obrazaca pomoću selektora atributa

Selektori atributa su posebno korisni za oblikovanje obrazaca bez klase ili id-a: 

input[type="text"], input[type="password"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background: yellow;
}
input[type="submit"] {
    padding: 2px 10px;
    border: 1px solid #804040;
    background: #ff8040;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Attribute Selektora</title>
<style>
    input[type="text"], input[type="password"] {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background: yellow;
    }
    input[type="submit"] {
        padding: 2px 10px;
        border: 1px solid #804040;
        background: #ff8040;
    }
</style>
</head>
<body>
    <form>
        <label>Username: <input type="text"></label>
        <label>Password: <input type="password"></label>
        <input type="submit" value="Login">
    </form>
</body>
</html>