A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Bevezetés a stíluslapok használatába /Strukturális látszólagos osztályok

CSS3-as szelektorok bemutatása
- Látszólagos osztályok
  - Strukturális látszólagos osztályok

CSS3-as szelektorok bemutatása

Látszólagos osztályok

Strukturális látszólagos osztályok

A HTML-elemek egymáshoz viszonyított struktúrája alapján bizonyos kitüntetett viszonyokhoz is rendelhetünk stílust látszólagos osztályok használatával:

:root: az az elem, amely a nem rendelkezik szülővel. A HTML-dokumentumok esetén ez maga a <html> elem. De a stíluslapokat XML és SVG állományok formázására is használhatjuk, ott viszont mást jelent a gyökér elem, ezért lett bevezetve a :root strukturális látszólagos osztály.
:empty :az az elem, ami nem rendelkezik egyetlen gyermekkel sem.
:only-child : az az elem, amely nem rendelkezik testvérrel.
:only-of-type: az az elem, amelyből nincs hasonló típusú a testvérei között.
:first-child: az az elem, amely az összes testvére közül az első.
:first-of-type: az ez elem, amely a szelektor típusából a testvérei között az első.
:nth-child(n): a testvérei között az n. elem.
:nth-of-type(n): a testvérei között az n. az adott szelektorra illeszkedő elemek közül.
:nth-last-of-type(n): a testvérei között hátulról az n. az adott szelektorra illeszkedő elemek közül.
:last-child: a testvérei közül az utolsó elem.
:last-of-type: az az elem, amely a szelektor típusából a testvérei között az utolsó.

Példa - Strukturális látszólagos osztályok

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Strukturális látszólagos osztályok</title>
<style type="text/css">
:root {background-color:darkblue;}
body {
    margin:20px; 
    padding:20px;
    border:1px solid gray;
    background-color:white;
     }
li {list-style-type:none;} /* eltüntetjük a listajelölőt */
li:first-child {border-top:4px double blue;}
li:last-child {border-bottom:4px double blue;}
li:nth-child(2n+1) 
    {
    background-color:azure;
    }
li:nth-child(2n) 
    {
    background-color:lightyellow;
    }
div {border:1px solid blue;}
div:empty {display:none;} 
</style>
<body>
<div></div>
<div>
<h1>Mondóka</h1>
<ul>
   <li>Egy – megérett a meggy,</li>
   <li>kettő – csipkebokor vessző,</li>
   <li>három – te vagy az én párom,</li>
   <li>négy – megcsípett a légy,</li>
   <li>öt – érik a tök,</li>
   <li>hat – hasad a pad,</li>
   <li>hét – zsemlét süt a pék,</li>
   <li>nyolc – üres a polc,</li>
   <li>kilenc – kis Ferenc,</li>
   <li>tíz – tiszta víz.</li>
   <li>Ha nem tiszta,</li>
   <li>vidd vissza,</li>
   <li>a kis cica megissza.</li>
</ul>
</div>
</body>
</html>

Magyarázat

A fenti példában néhány strukturális látszólagos osztály hatását szemléltetjük.

A :root szelektorral a HTML-elemünk gyökérelemét címeztük meg, és sötétkék hátteret állítottunk be.
A mondóka szövegét egy felsoroláslistában helyeztük el, de a listajelölőket eltüntettük a list-style-type:none definícióval.
A listaelemek közül azt, amelyik első gyerek (first-child) dupla felső szegéllyel láttuk el, az utolsó gyereket pedig dupla alsó szegéllyel.
Minden 2n+1. (vagyis páratlan) listaelemet azure háttérszínnel láttunk el, a párosok pedig világossárga hátterűek.
A div elemnek vékony kék szegélyt állítottunk be.
A div:empty szelektorral azon div elemet címeztük meg, amelynek nincs gyermek eleme, vagyis üres. A display:none tulajdonsággal pedig beállítottuk, hogy ez az elem ne jelenjen meg. Ez azért fontos, mert az elemek attól, hogy üresek, még befolyásolhatják a megjelenést a margó, kitöltés, szegély stb. beállításaival. Ezt egyszerűen láthatjuk, ha kitöröljük ezt a szabályt az interaktív példából, mert ekkor az üres div elem miatt is megjelenik egy plusz szegély.

A következő példában további strukturális látszólagos osztályok szerepét mutatjuk be:

Példa - Strukturális látszólagos osztályok

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Strukturális látszólagos osztályok – példák</title>
<style type="text/css">
  div {
      padding:10px;
       margin:10px;
       border:1px solid blue;
       }
div#pelda1 :only-child   {background-color:yellow;}
div#pelda2 :only-of-type {color:red;}
div#pelda3 :first-of-type {background-color:lightgray;}
div#pelda3 :last-of-type  {background-color:lightgreen;}
div#pelda3 :nth-of-type(2)  {font-weight:bold;}
div#pelda3 :nth-last-of-type(3) {font-style:italic;}
</style>
<body>
<div id="pelda1">
 <p>Ez a bekezdés nem rendelkezik testvérrel.</p>
</div>
<div id="pelda2">
 <p>Ennek a bekezdésnek van testvére, de nincs másik bekezdés testvére.</p>
 <blockquote cite="http://hu.wikipedia.org/wiki/HTML5">
A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve)
korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja,
hogy a webes alkalmazásokhoz ne legyen szükség plug-inek (pl. Adobe Flash,
Microsoft Silverlight, Oracle JavaFX) telepítésére.
</blockquote>
 <blockquote cite="http://hu.wikipedia.org/wiki/CSS">
A CSS (angolul Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.
</blockquote>
</div>
<div id="pelda3">
<blockquote cite="http://hu.wikipedia.org/wiki/HTML5">
A HTML5 a HTML (Hypertext Markup Language, a web fő jelölőnyelve)
korábbi verzióinak az átdolgozott változata. A kifejlesztésének egyik fő célja,
hogy a webes alkalmazásokhoz ne legyen szükség plug-inek (pl. Adobe Flash,
Microsoft Silverlight, Oracle JavaFX) telepítésére.
</blockquote>
<p>A fenti idézet a http://hu.wikipedia.org/wiki/HTML5 oldalról származik.</p>
 <blockquote cite="http://hu.wikipedia.org/wiki/CSS">
A CSS (angolul Cascading Style Sheets) a számítástechnikában egy stílusleíró nyelv, mely a HTML vagy XHTML típusú strukturált dokumentumok megjelenését írja le.
</blockquote>
<p>A fenti idézet a http://hu.wikipedia.org/wiki/CSS oldalról származik.</p>
<blockquote cite="http://hu.wikipedia.org/wiki/W3c">
A World Wide Web Consortium (W3C) egy konzorcium, mely nyíltszoftver-szabványokat – "ajánlásokat", ahogy ők hívják – alkot a világhálóra (World Wide Web).
</blockquote>
<p>A fenti idézet a http://hu.wikipedia.org/wiki/W3c oldalról származik.</p>
</div>
</body>
</html>

Magyarázat

Ebben a példában három különböző div elemet helyeztünk el, pelda1, pelda2 és pelda3 néven. Az első ilyen blokkban sárga hátteret állítottunk be azon elemeknél, amelyek egyetlen gyerekek (:only-child). Emiatt a bekezdés sárga háttérrel jelenik meg, hiszen a div-en belül nincs másik testvére.

A második blokkban az :only-of-type látszólagos osztályra mutattunk példát. A bekezdés piros színnel jelenik meg, mert nincs másik olyan testvére, ami bekezdés lenne.

A harmadik blokkban azt látjuk, hogy minden olyan elem, amely az ugyanolyan típusú testvére közül az elsők, világosszürke háttérrel láthatóak, míg az utolsók világoszöld hátterűek. Az :nth-of-type(2) látszólagos osztállyal állítottuk be azt, hogy azon elemek, amelyek azonos típusú testvérei közül a másodikok, félkövér kiemeléssel legyenek láthatóak. Az :nth-last-of-type(3) látszólagos osztállyal megcímzett elemek pedig dőlt betűvel jelennek meg. Ez azt jelenti, hogy a hátulról harmadik (vagyis a mi konkrét példánkban az első) elemek lesznek dőlt betűvel szedettek.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.