Domů › Selektory

Selektory

Selektory určují prvky, pro které má definice platit.

Univerzální selektor

Vybírá libovolný element (všechny elementy v dané hierarchii).

Příklad CSS:

* {
  color: blue;
}

Typový selektor

Vybírá element podle typu.

Část zdrojového kódu:

<p>text odstavece</p>

Příklad CSS:

p {
  color: blue;
}

Selektor třídy

Vybere element označený definovanou třídou.

Část zdrojového kódu:

<p class="odstavec">text odstavece</p>
<p class="poznamka">text poznámky</p>
<div class="poznamka">text poznámky</div>

Příklad CSS:

.odstavec {
  color: blue;
}
.poznamka {
  color: red;
}
div.poznamka {
  border: 1px solid red;
  padding: 2px;
}

Na stránce může být libovolné množství prvků se stejnou třídou.

Selektor pseudotřídy

Vybere element (spolehlivě funguje pouze u odkazu) na základě uživatelem aktivované události.

Příklad použití CSS na všechny nenavštívené odkazy:

a:link {
  color: #039;
}

Příklad použití CSS na všechny navštívené odkazy:

a:visited {
  color: #930;
}

Příklad použití CSS při aktivaci odkazu (pomocí myši nebo klávesy Enter):

a:active {
  color: #f30;
  text-decoration: underline;
}

Příklad použití CSS aktivované ve chvíli, kdy uživatel na odkaz najede kurzorem myši:

a:hover {
  color: #f30;
  text-decoration: underline;
}

Selektor pseudoelementu

Vybere pouze část skutečného elementu.

Příklad použití CSS na první písmeno odstavce:

p:first-letter {
  font-size: 300%;
  font-weight: bold;
  float: left;
  margin-right: .1em;
}

Podobně vlastnosti p:first-child (IE7+), p:last-child (IE9+).

Selektor identifikátoru

Vybere element označený definovaným identifikátorem.

Část zdrojového kódu:

<div id="zahlavi">Záhlaví</div>

Příklad CSS:

#zahlavi {
  color: green;
}

V jednom dokumentu (stránce) je možné id přiřadit pouze jedinému prvku.

Selektor následníka

Vybere element následníka, jež je vnořen do elementu předka bez ohledu na hloubku vnoření.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div img {
  border: none;
}

Selektor potomka

Vybere element potomka, jež je vnořen přímo do elementu rodiče.

Část zdrojového kódu:

<div>
  <img src="logo.gif" alt="Logo" />
  <p>
    Podrobnosti viz <a href="#">statistika přístupnosti
     <img src="stat.gif" alt="Statistika" /></a>.
  </p>
</div>

Příklad CSS:

div > img {
  border: none;
}

Poznámky:

  • mezera mezi elementy a ostrou závorkou je nepovinná
  • nepoporuje IE6-

Selektor obecného sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu, ale nemusí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 ~ p {
  color: blue;
}

V tomto příkladě se deklarovaná vlastnost odstavce nepoužije dříve, než u nadpisu 2. úrovně.

Poznámky:

  • mezera mezi elementy a znakem tilda je nepovinná
  • nepoporuje IE6-

 

Selektor sousedícího sourozence

Vybere druhý definovaný element, který je  sourozencem prvně definovaného elementu. Oba sourozenci musí mít stejného rodiče, musí ležet na stejné úrovni v hierarchii dokumentu a musí ležet bezprostředně za sebou.

Část zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>První odstavec</p>
  <p>Druhý odstavec</p>
  <h2>Nadpis 2. úrovně</h2>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
  <h3>Nadpis 3. úrovně</h3>
  <p>Druhý odstavec</p>
  <p>Druhý odstavec</p>
</body>

Příklad CSS:

h2 + p {
  color: blue;
}

Poznámky:

  • mezera mezi elementy a znakem plus je nepovinná
  • nepoporuje IE6-

Selektory atributů (parametrů)

Vybere element, obsahující definovaný atribut, hodnotu atributu, nebo jeho část.

Příklad použití CSS pouze na elementy a obsahující atribut title s hodnotou odkaz:

a[title="odkaz"] {
  color: blue;
}

Příklad použití CSS pouze na elementy span obsahující atribut lang, jehož hodnoty začínají řetězcem en (en-us, en-uk):

span[lang|="en"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota obsahuje řetězec nadpis (nadpis1, nadpis2, ale i podnadpis):

p[class*="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota začíná řetězcem nadpis (nadpis1, nadpis2):

p[class^="nadpis"] {
  color: blue;
}

Příklad použití CSS pouze na elementy p obsahující atribut class, jehož hodnota obsahuje řetězec pis (nadpis, podnadpis):

p[class$="pis"] {
  color: blue;
}

Poznámky:

  • IE7 vyžaduje striktní režim
  • nepoporuje IE6-