Grafik digitálnych médií

Selektory určujú prvky, pre ktoré má definícia platiť. Ďalej sú uvedené najpoužívanejšie selektory CSS:

1.Univerzálny selektor

Vyberá ľubovoľný element (všetky elementy v danej hierarchii).

Príklad CSS:

* {
  color: blue;
}

2. Typový selektor

Vyberá element podľa typu.

Časť zdrojového kódu:

<p> text odseku </p>

Príklad CSS:

p {
  color: blue;
}

3. Selektor triedy

Vyberie element označený definovanou triedou.

Časť zdrojového kódu:

<p class="odsek" >text odstavca</p>
<p class="poznamka" >text poznámky</p>
<div class="poznamka" >text poznámky</div>

Príklad CSS:

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

Na stránke môže byť ľubovoľné množstvo prvkov s rovnakou triedou.

4. Selektor pseudo-triedy

Príklad použitia CSS na všetky nenavštívené odkazy:

a:link {
  color: #039;
}

Príklad použitia CSS na všetky navštívené odkazy:

a:visited {
  color: #930;
}

Príklad použitia dynamického CSS aktivovanej vo chvíli, keď používateľ na odkaz nabehne kurzorom myši (:hover používajte až za :link a :visited):

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

Príklad použitia dynamického CSS aktivovaného prvku, ktorý je pripravený pre príjem vstupu zo vstupného zariadenia napr. na ktorý je práve kliknuté myšou, stlačený kláves Enter alebo medzerník (:active používajte až za :link, :visited a :hover):

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

Príklad použitia dynamického CSS pri výbere odkazu, tlačidla, výberového zoznamu a ďalších formulárových prvkov užívateľom napr. pomocou klávesnice:

a:focus {background: yellow;}
a:focus :hover {background: white;}

Prvý podriadený prvok iného prvku:

p:first-child {text-indent: 2em;}
p:first-child em {font-weight: bold;}

Prvá, druhá, predposledná a posledná bunka tabuľky:

 td:first-child {width: 20%;}
 td:nth-child(2) { width: 60%; }
 td:nth-last-child(2) {width: 40%;} td: last-child {width: 20%;}

Každý tretí riadok „counter“ (3n) – pozor začiatok je nula, preto je posun „offset“ nastavený na jedničku (+1):

tr:nth-child( 3n +1) {
    background-color: #eee;
}

Príklad rôzneho nastavenia dvojice úvodzoviek pre celý dokument a atribút prvku <cite> v jazyku slovenčina a angličtina:

:lang(sk) {quotes: '„' '“' "‚" "'"}
:lang(en) {quotes: '“' '”' "'" "'"}

cite[ lang="sk" ] {quotes: '„' '“' "‚" "'"}
cite[ lang="en" ] {quotes: '“' '”' "'" "'"}

5. Selektor pseudo-elementu

CSS3 od seba označením odlišuje pseudo-triedy, ktoré používajú jednu dvojbodku :a pseudo-elementy u ktorých sa používa „dvojitá dvojbodka“ ::(v CSS2 sa pri všetkých pseudo-prvkoch používa dvojbodka jednoduchá).

IE8 podporuje iba CSS2, od IE9+ je už plná podpora CSS3 pseudo prvkov. 

Príklad prvého riadku odseku:

p:first-line {text-transform: uppercase;}

Príklad použitia CSS na prvé písmeno odseku (vyberie iba časť skutočného elementu):

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

Vlastnosť content

Vlastnosť content umožňuje vkladať textový obsah a je možné ju používať v spojení so pseudo-elementmi :before a :after. Vlastnosť content nie je možné aplikovať na „neobsahové“ elementy ako je napr. <input>, <select>, <img> atď. 

Príklad úvodzoviek definovaných na úrovni odseku a zároveň okolo neho vložených „prázdnych“ úvodzoviek:

p {quotes: '„' '“' "‚" "'"}
p:before { content : no-open-quote}
p:after { content : no-close-quote}
cite:before { content : open-quote}
cite:after { content : close-quote}

Príklad pridania nového obsahu „medzery a šípky“ za prvok triedy .slideshow-next:

.slideshow-next {
  position: reletive
}
.slideshow-next: after {
   content : ' >';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url('design.png') no-repeat -100px 6px;
}

6. Selektor identifikátora

Vyberie element označený definovaným identifikátorom.

Časť zdrojového kódu:

<div id="zahlavie" >Záhlavie</div>

Príklad CSS:

#zahlavie {
  color: green;
}

V jednom dokumente (stránke) je možné id priradiť iba jedinému prvku.

7. Selektor následníka

Vyberie element následníka, ktorý je vnorený do elementu predka bez ohľadu na hĺbku vnorenia.

Časť zdrojového kódu:

<div>
  < img src="logo.gif" alt="Logo" / >
  <p>
    Podrobnosti pozri <a href="#">štatistika prístupnosti
     < img src="stat.gif" alt="Štatistika" / ></a>.
  </p>
</div>

Príklad CSS:

div img {
  border: none;
}

8. Selektor potomka

Vyberie element potomka, ktorý je vnorený priamo do elementu rodiča.

Časť zdrojového kódu:

<div>
  < img src="logo.gif" alt="Logo" / >
  <p>
    Podrobnosti pozri <a href="#">štatistika prístupnosti
     <img src="stat.gif" alt="Štatistika" /></a>.
  </p>
</div>

Príklad CSS:

div > img {
  border: none;
}

Poznámky :

• medzera medzi elementmi a ostrou zátvorkou je nepovinná
• nepoporuje IE6-

9. Selektor všeobecného súrodenca

Vyberie druhý definovaný element, ktorý je súrodencom prvého definovaného elementu. Obaja súrodenci musia mať rovnakého rodiča, musia ležať na rovnakej úrovni v hierarchii dokumentu, ale nemusia ležať bezprostredne za sebou.

Časť zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>Prvý odsek</p>
  <p>Druhý odsek</p>
  <h2>Nadpis 2. úrovne</h2>
  < p >Druhý odsek</ p >
  < p >Druhý odsek</ p >
  <h3>Nadpis 3. úrovne</h3>
  < p >Druhý odsek</ p >
  < p >Druhý odsek</ p >
</body>

Príklad CSS:

h2 ~ p {
  color: blue;
}

V tomto príklade sa deklarovaná vlastnosť odseku nepoužije skôr, ako pri nadpise 2. úrovne.

Poznámky :

• medzera medzi elementmi a znakom tilda je nepovinná
• nepoporuje IE6-

10. Selektor susediaceho súrodenca

Vyberie druhý definovaný element, ktorý je súrodencom prvého definovaného elementu. Obaja súrodenci musia mať rovnakého rodiča, musia ležať na rovnakej úrovni v hierarchii dokumentu a musia ležať bezprostredne za sebou.

Časť zdrojového kódu:

<body>
  <h1>Nadpis</h1>
  <p>Prvý odsek</p>
  <p>Druhý odsek</p>
  <h2>Nadpis 2. úrovne</h2>
  < p >Druhý odsek</ p >
  <p>Druhý odsek</p>
  <h3>Nadpis 3. úrovne</h3>
  <p>Druhý odsek</p>
  <p>Druhý odsek</p>
</body>

Príklad CSS:

h2 + p {
  color: blue;
}

Poznámky :

• medzera medzi elementmi a znakom plus je nepovinná
• nepoporuje IE6-

11. Selektory atribútov (parametrov)

Vyberie element, obsahujúci definovaný atribút, hodnotu atribútu, alebo jeho časť.

Príklad použitia CSS iba na elementy aobsahujúce atribút titles hodnotou odkaz:

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

Príklad použitia CSS iba na elementy spanobsahujúce atribút lang, ktorého hodnoty začínajú reťazcom en(en-us, en-uk):

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

Príklad použitia CSS iba na elementy pobsahujúce atribút class, ktorého hodnota obsahuje reťazec nadpis(nadpis1, nadpis2, ale aj podnadpis):

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

Príklad použitia CSS iba na elementy pobsahujúce atribút class, ktorého hodnota začína reťazcom nadpis(nadpis1, nadpis2):

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

Príklad použitia CSS iba na elementy pobsahujúce atribút class, ktorého hodnota končí reťazcom  pis(nadpis, podnadpis):

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

Deklarácia

h1 {
  color: blue;
}

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

/* odsek */
p {
  color: blue; /* modra farba */ 
  font-size: 90%; /* veľkosť textu */
}