Stylování prvního a posledního potomka v CSS

Kapitoly:

 

Stylování prvního potomka (třeba v ul li seznamu) je velmi jednoduché:

ul li:first-child { styly... }

first-child je funkční již od verze CSS2. last-child je funkční až od verze CSS3:

ul li:last-child { styly... }

 

Použití třídy class (#class)

Mnohem jednodušší je ale přidat k položce li nějaký class už v HTML - př.:

<li class="treti">Třetí položka seznamu</a>

a pak ho nastylovat v CSS takto: 

.treti { styly... }

nebo takto:

ul li.treti { styly... }

případně takto:

li.treti { styly... }

 

Kombinování třídy s first-child a last-child (#kombinovani)

Výhodou řešení při použití class je možnost nastylovat nejenom první a poslední položku, ale klidně i nějkaou mezi nimi - třetí, prostřední, atd... První a poslední položku tedy můžeme stylovat pomocí child a ostatním nastavit třídy class:

<ul>
<li>První</li>
<li class="druhy">Druhý</li>
<li class="treti">Třetí</li>
<li>Čtvrtý</li>
</ul>

CSS by tedy vypadalo nějak takhle:

 

ul li:first-child { styly... }
ul li.druhy { styly... }
ul li.treti { styly... }
ul li:last-child { styly... }

 

Použití pouze tříd class (#jen-class)

Mnohem spolehlivější je však přidat třídy všem položkám a nespoléhat se na first-child a last-child. HTML tedy bude vypadat:


<ul>
<li class="prvni">První</li>
<li class="druhy">Druhý</li>
<li class="treti">Třetí</li>
<li class="ctvrty">Čtvrtý</li>
</ul>

Potom můžeme libovolně stylovat v CSS:

ul li.prvni { styly... }
ul li.druhy { styly... }
ul li.treti { styly... }
ul li.ctvrty { styly... }

Případně jednodušeji bez definice, že se stylování týká pouze seznamu UL LI:

.prvni { styly... }
.druhy { styly... }
.treti { styly... }
.ctvrty { styly... }

Závěrem chci říct, že tam, kde můžete zasahovat do HTML, raději používejte třídy class. Protože starší explorery neznají first-child, ani last-child. 

Spriehľadnenie prvku pomocou CSS

Ak chceme nejaký prvok sčasti alebo úplne spriehľadniť (stále však má svoje miesto v stránke, na úplne zmiznutie slúži deklarácia display: none;) môžme použiť vlastnosť opacity.

Nasledujúce príklady deklarujú rovnakú priehľadnosť:

opacity: 0.5;
opacity: .5;

Príklady využitia vlastnosti opacity:

Často narazíme aj na situácie, kedy potrebujeme spriehľadniť iba dané pozadie a text zachovať čitateľný. Práve na takéto situácie je tu pre nás formát zadávania farby v tvare RGBA, pričom „R“ (red) je červená, „G“ (green) zelená, „B“ (blue) modrá, a „A“ (alpha) deklaruje priehľadnosť.

Ako môžte vidieť na nasledujúcej živej ukážke, v niektorých prípadoch je formát RGBA užitočnejší ako opacity:

Opacity vs. RGBA

Je pravda, že aplikovanie priehľadnosti na prvky našej webovej stránky môže umocniť pôžitok užívateľa, ale nie je vhodné, používať ju všade. Staršie prehliadače vlastnosť opacity nepodporujú a RGBA je pre nich tiež nepoznaná novinka. Snažte sa preto túto vlastnosť a formát farby používať tak, aby ste užívateľovi bez podpory prehliadača nezamedzili prehliadať obsah vašej webovej stránky.

Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.

Zarovnání obsahu pomocí CSS vlastnosti float

Pomocí CSS vlastnosti float můžeme obsah zarovávat doprava, doleva, nahoru i dole na stránku. Hodí se to zejména u výpisu článků, kde chceme mít vlevo název článku a vpravo datum vydání. Živá ukázka.

<p style="float:left;width:50%">Název článku<br>Popis článku</p>
<p style="float:left;width:49%">Datum<br>Autor</p>
<br style=clear:left>

CSS vlastnost content

CSS vlastnost content slouží ke vkládání textu pomocí CSS před, nebo za jiný text v HTML. Většinou je potřeba také za text v content vložit mezeru, aby se nový text nelepil na ten v HTML. Pro vložení textu před jiný text v HTML slouží vlastnost before (= předtím) – Živá ukázka:

.text:before {
    content: "Nějaký nový text před jiným textem. "; /* Zde zadáme nový text */
}

Pro vložení textu za jiný text v HTML slouží vlastnost after (= potom) – Živá ukázka:

.text:after {
    content: "Nějaký nový text za jiným textem. "; /* Zde zadáme nový text */
}

Do vlastnosti content nelze vkládat HTML značky (div, span, strong…). Ve zdrojovém kódu se pochopitelně nezobrazí vkládaný text pomocí contentu hned vedle něj, ale zobrazí se až po zobrazení CSS souboru. Tato vlastnost je tedy dobrá třeba před kopírovaním zdrojový kódů (pokud nezkopíruje i CSS).

Pokud Vás zajímá, jak nahradit text pomocí CSS vlastnosti content za jiný, koukněte na tento článek.

 

Nahrazení textu ve spanu jiným textem pomocí CSS vlastnosti content

Pokud máte na stránce nějaký text, který chcete pomocí CSS nahradit jiným, stačí původní text obalit do <span>. Následně lze v CSS nastylovat span tak, aby se nezobrazil – pomocí display: block. A následně vložit jiný text za ten původní (nyní již vymazaný) pomocí CSS vlastnosti content. Text také můžeme obalit divem, ale nemusíme. Takže HTML kód bude:

<div class="text"><span>Původní starý text</span></div>

CSS:

.text:after {
    content: "Nějaký nový text"; /* Zde zadáme nový text */
}

.text span {
    display: none; /* Zde zneveřejníme text ve spanu */
}

Vlastně jsme starý text obalený ve spanu zneviditelnili a naopak pomocí vlastnosti content zveřejnili jiný obsah.

Živá ukázka

Menu v CSS pomocí hover a seznamu ul li

Potřebujete na své stránky vodorovné menu a nechce se Vám vytvářet vlastní? Vytvořil jsem pro vás zdarma šablonu na jednoduché menu s hover efektem za pomoci UL seznamu. Zdrojový kód je dobře okomentovaný, takže určitě poznáte, co k čemu slouží 🙂

HTML:

<div id="obal">   <div id="menu">     <h2>Navigace:</h2>     <ul>       <li class="prvni"><a href="prodej.html">Prodej</a></li>       <li><a href="sluzby.html">Služby</a></li>       <li><a href="cenik.html">Ceník</a></li>       <li><a href="onas.html">O nás</a></li>       <li class="spodni"><a href="kontakt.html">Kontakt</a></li>     </ul>   </div> </div>  

CSS: 

#obal {     background: orange;     width: 499px;     height: 38px;     font-family: "Century Gothic", sans-serif; } #menu ul {   width: 700px;   float: left; /* zajišťuje roztažení pozadí za položky nabídky */   margin: 0;   padding: 3px 0;       /* mezera mezi okrajem nabídky a okrajem tlačítek */   list-style-type: none; } #menu ul li {   float: left;          /* zajišťuje vodorovné uspořádání položek nabídky */   border-right: 1px solid black;   border-top: 1px solid black;   border-bottom: 1px solid black;   border-left: 1px solid black;   margin-left: 5px; }   #menu a {   display: block;       /* odkaz se roztáhne přes celou položku nabídky */   padding: 5px 20px;    /* odsazení textu od okraje záložky */   color: red;        /* barva textu odkazu */   font-size: 105%;   font-weight: bold;   text-decoration: none;   transition: 0.8s;  }  #menu a:hover {     color: #EDF0EA;     background-color: red;     transition: 0.3s;  } #menu h2 {   display: none;        /* zrušení vykreslování nadpisu */ }

Živá ukázka

Ke stažení (pro funkčnost, rozbalte zip do nějaké složky)

Prolnutí v CSS – transition

Občas se nám na webu hodí, když chceme nechat po hoveru prolnout nějaký prvek. K tomu nám slouží šikovná vlastnost v CSS – transition. Transition má pouze jeden parametr a to číslo s eskem.

Příklad: transition: 0.8s značí, že se nám bude prolnutí u hoveru trvat 0,8 sekundy. Jen chci upozornit, že pokud v CSS značíme desetinné číslo, píšeme vždy tečku (místo čárky). Živá ukázka.

HTML:

<a href="http://mujskript.cz">MůjSkript.cz</a>

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Pokud bychom chtěli i zpětný efekt, po odjetí myší z prvku, vložíme vlastnost transition i k samotnému prvku (bez hoveru). Zde tedy změníme pouze CSS. U zpětného transitionu můžeme mít jinou hodnotu (= jinou délku přechodu). Živá ukázka.

CSS:

a {
    color: green;
    text-decoration: underline;
    font-weight: bold;
    transition: 0.8s; /* Zde se nastavuje zpětný efekt po odjetí myší. Může mít jinou hodnotu */
}
 
a:hover {
    color: red;
    text-decoration: none;
    transition: 0.8s;
}

Máte-li nějaké dotazy, piště do komentářů.

FIXOVÁNÍ 3: Z-index a pozicované prvky

Na DJPW se objevil dotaz, jak udělat, aby se roloval prvek vlevo podle celého webu nad určitým divem, ale aby se schoval pod jiným divem. Za pomoci různých z-indexů je to hračka. 

Nejdříve si doporučuji přečíst předchozí články z fixování:

Uvedu jednoduchý příklad: z-index:1 má menší váhu, než z-index: 2. A z-index:50 má menší váhu než z-index:2. Tím myslím, že to, co má vždy nejmenší váhu z-indexu je nejníže položené na stránce. A co má nejvyšší z-index je na stránce položeno nejvýše. Živá ukázka.

HTML:

<div id="fixovany">
FIXOVANÝ OBJEKT</div>
<div id="cast">
První text, přes který nebude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="obsah">
Druhý text, nad kterým bude vidět fixovaný panel
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS: 

#fixovany {
    position:fixed; 
    width: 150px; 
    height: 150px; 
    top: 0; 
    left: 0; 
    background-color:lime; 
    z-index:2; /* Prvek druhý (2), takže je výše, než prvek první*/
}
 
#cast {
    position: absolute; 
    width: 100%; 
    height: 200px;
    top: 0;
    left: 0;
    background-color:yellow; 
    z-index:3; /* Prvek je první (1), takže je dole */
}
#obsah {
    background: red;
    z-index: 1;
    left: 0;
    
}

FIXOVÁNÍ 2: Fixní text při rolování (scrollování)

(Předchozí článek ze série) Potřebujete někdy něco důležitého „přichytit“ ke straně stránky, aby to návštěvníci měli stále na očích a jezdilo to se stránkou? Říká se tomu fixace. Pomocí CSS vlastnosti position: fixed můžeme cokoliv přichytit ke stránce. Nyní si vysvětlíme CSS kód:

  • position: fixed — pevná a neměnná pozice, fixujeme objekt
  • height a width — výška a šířka boxu (elementu) div
  • left: 0px — popostrčení od levé strany stránky. Lze zaměnit za 
    • left (vlevo)
    • right (vpravo)
    • top (nahoře)
    • bottom (dole)
      • Vždy udáváme dvě vlastnosti pozice (vpravo, vlevo) a umístění (nahoře, dole)

HTML:

<div id="fixace-leva-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>
 
<div id="fixace-prava-horni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>
 
<div id="fixace-prava-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doprava dolů na stránku.</p>    
</div>
 
<div id="fixace-leva-dolni">
<p>Text, který se bude posouvat s <code><b>div</b></code>em. 
Bude zarovnán doleva nahoru na stránku.</p>    
</div>

 

CSS: 

#fixace-leva-horni {
    position: fixed; 
    background: red;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */
    top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
 
#fixace-prava-horni {
    position: fixed; 
    background: blue;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */ 
    top: 0px; /* Tímto se určuje pozice na stránce - NAHOŘE */
}
 
#fixace-prava-dolni {
    position: fixed; 
    background: green;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    right: 0px; /* Tímto se určuje pozice na stránce - VPRAVO */ 
    bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}
 
#fixace-leva-dolni {
    position: fixed; 
    background: orange;
    color: white;
    height: 20;
    width: 240px;
    padding: 10px;
    left: 0px; /* Tímto se určuje pozice na stránce - VLEVO */ 
    bottom: 0px; /* Tímto se určuje pozice na stránce - DOLE */
}

Živá ukázka

Zdrojový kód

FIXOVÁNÍ 1: Fixní tabulka před tabulkou scrollovatelnou do šířky

Další dotaz, tentokrát přes chat (najdete ho vpravo dole), se týkal zafixování čtyř sloupců a dvou scrollovatelných do šířky. Tuto vlastnost můžete znát z MS Office, kde se buňky přichytávaly k okraji.

Řešení bylo pomocí první tabulky, která je zafixovaná překrývá tu druhou. Druhá tabulka je pomocí paddingu odsazená vedle té první.

HTML kód (s částí CSS):

<table id="fixni" style="text-align: left; width: 300px; max-height: 200px" border="1">
  <tbody>
    <tr>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text -  8956254564184. Klidně se i zalomí...</td>
      </tdbody>
       </table>
       <table id="druha" style="text-align: left; min-width: 85px; min-height: 190px;" border="1">
   <tdbody>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýýtgrrfewgfzgezfgrfzugvczutfgewbdszfugwhejasgfzuuwgfhcbzwgfcwhegfzš</td>
    </tr>
  </tbody>
</table>

CSS kód: 

    #fixni {
        position: fixed; 
        left: 0; 
        top: 0; 
        background: #8ECCF0; 
        z-index: 1
        
    }
 
    #fixni td {
        max-width: 75px; 
        word-wrap: break-word
    }
    #druha {
        padding-left: 324px;
        margin: -8px;
    }

Živá ukázka pomocí iframe ve stránce

Živá ukázka samotných tabulek (zkuste si zmenšit okno prohlížeče)