CSS elementti-valitsin

CSS elementti-valitsin

Yleisimpiä CSS-valitsijoita on elementti-valitsin. Toisin sanoen dokumentin elementit ovat perusvalitsijoita.

HTML-tyylejä asettaessa valitsija on yleensä jokin HTML-elementti, kuten p, h1, em, a tai jopa html itse:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

Kokeile itse

Voi siirtää tyylin yhdestä elementistä toiseen.

Oletetaan, että päätät tehdä yllä olevan kappaletekstin (ei h1-elementtiä) harmaaksi. Riittää, että muutat h1-valitsimen p:ksi:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

Kokeile itse

Tyyppivalitsin

W3C-standardissa elementti-valitsija kutsutaan myös tyyppivalitsijaksi (type selector).

“Tyyppivalitsin sopii dokumentin kielen elementin nimeen. Tyyppivalitsin sopii dokumenttikoneessa kyseisen elementin tyyppien jokaiselle esimerkille.”

Seuraava sääntö sopii dokumenttikoneessa kaikille h1-elementeille:

h1 {font-family: sans-serif;}

Siksi voimme myös asettaa XML-dokumentin elementtien tyylit:

XML dokumentti:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS-dokumentti:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

Tarkastele vaikutusta

Yllä olevista esimerkeistä näet, että CSS-elementti-valitsin (tyyppivalitsin) voi asettaa XML-dokumentin elementin tyylit.

Jos tarvitset lisätietoja XML-dokumenttien tyylittelystä, vieraile CodeW3C:n XML-opas.