Elem kiválasztó

A legegyszerűbb kiválasztási lehetőség, a HTML elem nevével hivatkozunk rá.

Nézzünk egy példát:

Azt szeretnénk elérni, hogy a
- H1-es és a H2-es címsor piros betűkkel,
- a bekezdés sárga alapon jelenjen meg.
Az oldal Head részébe kell elhelyeznive ezt a pár sort, az oldal megjelenése a következőképpen alakul:

<head>
  ...
  
  ...
</head>
<body>
  ...
  Ez egy h1-es címsor
  Ez egy P tag.
  Ez egy h2-es címsor
  Ez megint egy P tag.
  ...
</body>

A P tag-ek a bejegyzés miatt sárga (yellow) háttérszínűek lesznek.
A két címsornak ("h1" és "h2") a betűszíne pedig pirosra változik.

Ez egy h1-es címsor

Ez egy P tag.

Ez egy h2-es címsor

Ez megint egy P tag.

Ha jól megfigyeljük a fenti stílus meghatározást, akkor észrevehetjük, hogy a két címsornak ugyanazt a formázást állítottam be. Egyszerűbben is megadhattam volna, lássuk a megoldást.

< style type = "text/css">
p {background-color: yellow;}
h1, h2 {color: red;}
</ style>>

Az újdonság a "h1, h2" megadási lehetőség. A kiválasztókat egymástól vesszővel elválasztva felsorolhatjuk minden olyan HTML elemre, ami rendelkezik a megadandó tulajdonsággal. Az eredményünk a jobb oldalon látható, és teljesen megegyezik a fenti eredményablakkal.

Ez egy h1-es címsor

Ez egy P tag.

Ez egy h2-es címsor

Ez megint egy P tag.

Az elem kiválasztó megismerése után javaslom, hogy az osztály kiválasztóval ismerkedj meg.

Tovább az osztály kijelölőkhöz

ugrás a lap tetejére