HTML CSS Windows Photoshop
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
  • Moje-Mesto header
 Avtor: -primož-    05.01.10
first-child               
CSS vodiči

first-child_thumb
:first-child je psevdo razred, ki določi poseben stil le prvemu HTML elementu izmed večih, brez da bi morali temu elementu določiti poseben razred (class). :first-child je uporabna koda za poudarjanje prvih naslovov, z njo pa lahko ustvarite tudi galerijo.

 

 

 

Če želite, da ta koda deluje v Internet Explorerju morate nujno dodati <!DOCTYPE>.

S pomočjo te kode sem naredil preprosto CSS galerijo.

Za boljšo predstavo vam priporočam, da si ogledate spodnje primere.

 

Primer 1: osnovna zamisel first-child razreda

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

p:first-child {color:blue}

</style>
</head>

<body>
<p>Moje-Mesto.com</p>
<p>Moje-Mesto.com - Moje-Mesto.com</p>
<p>Moje-Mesto.com - Moje-Mesto.com - Moje-Mesto.com</p>
</body>
</html>

PRIKAZ first-child


Primer 2: Vse povezave v prvem odstavku

Namesto povezave lahko tukaj uporabite različne HTML elemente, npr. i, img, li, h1, ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

p:first-child a {color:blue}

</style>
</head>

<body>
<p><a>Moje-Mesto.com</a> - Moje-Mesto.com - <a>Moje-Mesto.com</a></p>
<p>Moje-Mesto.com</p>
<p>Moje-Mesto.com - Moje-Mesto.com</p>
</body>
</html>

PRIKAZ first-child 2


Primer 3: Prva povezava v prvem odstavku

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

p:first-child a:first-child {color:blue}

</style>
</head>

<body>
<p><a>Moje-Mesto.com</a> - Moje-Mesto.com - <a>Moje-Mesto.com</a></p>
<p>Moje-Mesto.com</p>
<p>Moje-Mesto.com - Moje-Mesto.com</p>
</body>
</html>

PRIKAZ posebej oblikovane prve povezave



first-child
pride zelo prav, če želite vplivati na nek element, ki se v kodi pojavlja prvi. Recimo uporabljate h1 naslove a želite poudariti prvi naslov, ki je bistvenega pomene. Uporabite first-child. Želite narediti galerijo slik. Znova uporabite first-child. Idej in možnosti uporabe je še več, zato vam priporočam, da se dodobra seznanite s tem psevdo-razredom.
Komentiraj:
Ime
E-mail
Spletna stran

!joomlacomment 4.0 Copyright (C) 2009 Compojoom.com . All rights reserved."

 
Sorodni vodiči

Moje-Mesto.com

Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.

 

Facebook oglaševanje

Izdelava spletnih strani

Ustvari.si

Nescafé

Follow us on Twitter
Follow us on Twitter
Follow us on Twitter

Oglasi