Esimerkkejä valitsimien käytöstä

Seuraavassa on lyhyesti esitelty muutamia esimerkkejä valitsimien (engl. selector) käytöstä.

Esimerkkitekstit

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Esimerkin CSS-määritykset

Seuraavien div-elementin sisällä olevat p-elementtien perusväritykseksi asetetaan seuraavat arvot. Arvot toteutuvat ainoastaan listan sisällä olevissa p-elementeissä.

div p {
  color:red;
  background-color: white;
  font-size: 1em;
}

Seuraavassa määritellään välittömästi div-elementin sisällä olevat p-tekstikappaleet vihreiksi. Se vaikuttaa kahteen ensimmäiseen kappaleeseen.

div > p {
  color: green;
  background-color: yellow;
  font-size: 1em;
}

Seuraavassa määritellään ensimmäiseen välittömästi div-elementin jälkeen tulevaan p-elementtiin.

div + p {
  color:white;
  background-color: navy;
  font-size: 1em;
}

Seuraavassa havainnollistetaan attribuuttien mukaan tehtäviä CSS-määrityksiä. Viimeisessä esimerkin kappaleessa on käytetty title-attribuuttia.

p[title] {
  color:white;
	background-color: navy;
	font-size: 1.5em;
}

Esimerkin XHTML-lähdekoodi

<div>
<p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>

<p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>

<ul>
<li>
<p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>
<p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>
</li>
</ul>
</div>

<p>The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>

<p title="Kappaleella havainnollistetaan titlen käyttöä CSS-määrityksissä">
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.  The quick brown fox jumps over the lazy dog.  
The quick brown fox jumps over the lazy dog.
</p>