Selektory v CSS

Částem dokumentu lze přiřadit určité styly, můžeme to udělat pomocí inline stylů (měněný prvek má atribut style="..."), ale tento způsob není moc vhodný. Další, a mnohem lepší, způsob je definice v tabulce stylů pomocí selektorů.

Selektor tagu

První ze selektorů je selektor tagu, kterým změníme vzhled všech určených tagů ve stránce.
Použití: tag {styly} Příklad:


<style type="text/css">
  h4 {color:#660000;font-weight:bold}
  </style>
  ...
  <h4>Nadpis 1</h4>
  ...
  <h4>Nadpis 2</h4>

Tento zápis způsobí obarvení všech tagu h4 na tmavě červenou barvu a napíše text kurzívou. Výsledek je vidět níže.

Nadpis 1

Nadpis 2

Selektor třídy

Další z běžných selektorů je selektor třídy. Tento selektor změní všechny prvky obsahující atribut class určité hodnoty.
Pokud má prvek již definované vlastnosti, přidají se nové vlastnosti a znovu definované se přepíší. Použití: .třída {styly} - že se jedná o třídu, pozná prohlížeč z tečky před jménem
Příklad:


<style type="text/css">
  .modra {color:#0000AA;letter-spacing:4px}
  .tucna {font-weight:bold}
  </style>
  ...
  <span class="modra">SPAN</span>
  ...
  <div class="modra tucna">DIV</div>
  ...
  <h4 class="modra">Nadpis 3</h4>

Způsobí obarvení textu na modro u všech tagů které mají class="modra" a upraví vzdálenosti písmen na 4px. Dříve definovaný tag h4 dostane modrou barvu a získá větší vzdálenost písmen, kurzíva zůstane. Pokud chcete prvku přiřadit více tříd oddělíte jejich jména v atributu class mezerou. U prvku div byly použity 2 třídy a tak získal i ztučnění.
SPAN

DIV

Nadpis 3

Jedinečný selektor

Při skriptování stránek se často přiřazují prvkům jména v atributu id, tato jména mohou být použita i pro změnu stylu pomocí jedinečného selektoru (prvek se stejným id může být na stránce pouze jednou). Pro změnu stylu je vybrán pouze jediný prvek s daným ID.
Použití: #id {styly} - křížek před id značí jedinečný selektor
Příklad:


<style type="text/css">
  #extra {background-color:#A0A0A0}
  </style>
  ...
  <div id="extra" class="modra">jedinečný 
  DIV </div>

Vykreslí prvek div s šedou barvou pozadí a atributem class="tucna" přiřadí tučné písmo.

jedinečný DIV

Předchozí selektory jsou velmi často používané a často se s nimi vystačí. Tento přehled jsem psal spíše kvůli selektorům, které uvedu v následující části.

Univerzální selektor

Univerzální selektor, vybere všechny prvky stránky. Na stránkách se s ním často nesetkáme, ale je užitečný např. při tvorbě layoutu, protože se jím můžeme nechat zobrazit okraje všech prvků. Je vhodné ho zkombinovat s CSS atributem !important, díky kterému dostane styl přednost před všemi ostatními.
Použití: *{styly}
Po stisku tlačítka se (de)aktivuje "debug" styl ze souboru debug.css. Styl je do dokumentu vložen jako alternativní styl příkazem:


<link rel="alternate stylesheet" title="Debug" type="text/css" 
href="debug.css">

Obsahem souboru je jednoduchá tabulka stylů s univerzálním selektorem:

*{border:1px solid red !important} Styl vykreslí kolem všech prvků stránky červený okraj 1px tlustý. Styl má také atribut !important, který způsobí přepsání okraje i u prvků, které již border mají např. kalednář - pokud by ve stylu !important nebyl, došlo by k vytvoření borderu kolem již existujících okrajů (zobrazily by se 2 čáry - původní černá a vně nová červená).
Po aplikaci stylu se stránka trochu prodlouží, to je způsobeno zvětšením prvků o 1px na každé straně. Tomuto se bude v budoucnosti moci předejít stylem outline, který vykreslí okraj uvnitř prvku, tento styl je v součastnosti v prohlížečích chybně implementován.

Samotná změna stylu je provedena javaskriptem (nefunguje v Opeře):


document.styleSheets[3].disabled=!(document.styleSheets[3].disabled);

Tento příkaz (de)aktivuje 4.tabulku stylů v dokumentu (0-globální styl stránek, 1-styl pro tisk, 2-styl pro příklady na této stránce, 3-alternativní styl). Pokud používáte Mozillu nebo Operu, můžete změnit styl také z menu Zobrazit-Styl.

Selektroy s atributy

V nových Mozillách a Operách lze k selektorům přiřazovat i atributy, které obsahují tagy (IE je zatím nepodporuje).
Použití: selektor[atribut] {styly} Příklad:

*[onclick] {cursor:pointer}

...

<span onclick="alert('Na tento SPAN lze opravdu kliknout!')">lze 
  na mě kliknout?<span>

Všem prvkům které mají definovanou událost onclick změní kurzor na ručičku.

»lze na mě kliknout?«

Jako atribut lze použít i výraz:

selektor[atribut="hodnota"] např. a[href="http://www.microsoft.com"]{display:none} skryje všechny odkazy na stránky http://www.microsoft.com

Jako hodnota lze použít identifikátor (class, id) bez použití uvozovek, ostatní hodnoty se musí zapisovat jako řetězce, tedy s uvozovkami.

Pseudo selektory

Předchozí selektory vybírali prvky ze stromové struktury dokumentu. Existují ovšem i selektory pro části prvků, které nejsou ve stromové struktuře popsány. Většinou nemohou existovat samostně a tak k sobě potřebují další selektor.

První takový selektor je :first-line, který vybírá první řádek textu v blokovém prvku (div, p, h1, h2,...).
Použití: selektor:first-line {styly} Příklad:


.text1:first-line {font-variant:small-caps}
...
<div class="text1">...</div>

Vykreslí první řádek textu v DIVu třídy text1 kapitálkami

Frekvence taktování procesoru se stává výchozím bodem pro stanovení rychlosti počítače. V současnosti jsou možné hodnoty téchto frekvencí od 4,77 MHz do 50 MHz. Ale pozor! Ani u automobilu není rychlost výlučně určena výkonem motoru, ale také odporem vzduchu, váhou vozidla a dalšími ukazateli. Totéž platí pro počítače, kde taktovací frekvence je také pouze jedním z ukazatelů určujících rychlost systému.

Další selektor je :first-letter, který vybírá první znak textu v blokovém prvku.
Použití: selektor:first-letter {styly} Příklad:


.text2:first-letter{font-weight:bold;float:left;font-size:30px;margin-right:6px}
...
<div class="text2">...</div>

Vykreslí první znak textu v DIVu třídy text2 jako iniciálu

Přestože dnešním uživatelským programům ve většině případů postačuje 512 kByte operační paměti, řada z nich dosahuje optimálních výkonů při zajišténí paměti větší jak 1 MB. Rozšíření operační paměti je také dáno zlepšenými adresovacími možnostmi procesoru.

Další selektory slouží ke zjištění stavu odkazů. Jsou to selektory :link, :visited, :hover, :active a :focus
Použití: selektor:stavový selktor {styly} Příklad:


a.odkaz:hover{color:red;border:1px solid red}
a.odkaz:active{color:blue;border:1px solid red}
...
<a class="odkaz" href="#">text odkazu</a>

Zvýraznění odkazu při najetí myší nad odkaz třídy odkaz a jeho zmodrání po kliknutí

text odkazu

Význam ostatních selektorů je následující:
:link - odkaz, který nebyl dosud navštíven
:visited - již navštívený odkaz

:hover - odkaz, nad kterým je kurzor myši
:active - odkaz, který je právě aktivován (klik,enter)
:focus - odkaz, který je zaměřen tabulátorem

poslední 3 selektory je v některých prohlížečích (Gecko) možno použít i na jiné objekty, než jen odkazy.

komentáře (2)