Lembaran Gaya Lata/Pemilih

Dengan CSS, sesuatu pemilih (selector) merupakan sebahagian peraturan yang hadir sebelum tanda "{" pertama, seperti kedudukan "p" dalam peraturan " p { font-weight:bold; } ". Pemilih menetapkan unsur mana yang harus dikenakan peraturan CSS, dengan menamakan jenis unsur, misalnya "div", kelas unsur, atau kepercaman ("id") unsur tersebut. Pemilih hanya boleh digunakan dengan CSS yang dipaut atau dibenam; ia tidak boleh digunakan dalam CSS sebaris.

Gambaran am Pemilih

Jadual berikut memberikan gambaran am tentang pemilih-pemilih. Bahagian-bahagian yang menyusuli jadual memerikan setiap jenis pemilih dengan lebih terperinci.

Nota penterjemah: Kod yang digunakan pelayar perlu ditulis dalam bahasa Inggeris. Namun nilai boleh ditulis dengan bahasa lain. Lihat cebisan-cebisan kod di bawah

Gambaran am Pemilih

Jenis Pemilih	Contoh Pemilih	Peraturan Contoh	Nota
jenis ("type")	div	div { margin:7px; padding:7px; }
kelas ("class")	.mustahak	.mustahak { font-weight:bold; color:red; }
kepercaman ("id")	#hanyaYangIni	#hanyaYangIni { font-family:courier; }
sejagat ("universal")	*	* { color:green; }
pseudokelas ("pseudo-class")	a:link	a:link { color:blue; }
pseudounsur ("pseudo-element")	p:first-letter	p:first-letter { color:red }
anak ("descendant")	td span	td span { font-weight:bold; }
terkumpul ("grouped")	h1, h2, h3	h1, h2, h3 { text-align:center; }

Jenis

Pemilih-pemilih ini memadankan unsur berlandaskan nama jenis unsur. Contoh di atas menggunakan pemilih jenis untuk membuat setiap teks yang terkandung dalam jenis p kelihatan tebal. Kita dapat mengguna pemilih jenis dengan apa jua unsur. Di bawah ini diturunkan beberapa contoh:

 div{
   margin:7px;
   padding:7px;
 }

 body{
   background-image:url("image.gif");
   font-size:.9em;
 }

Kelas

Nota: Pemilih kelas bekerja dengan dokumen-dokumen (X)HTML. Ia tidak bekerja dengan dokumen XML secara amnya melainkan Agen Pengguna (pelayar web ataupun pembaca dokumen lain) dapat menentukan atribut yang mana sebenarnya atribut kelas buat unsur yang terkandung dalam dokumen. Dengan dokumen-dokumen (X)HTML, kelas ("class") diberi definisi sebagai atribut kelas.

Nilai "kelas" dan "id" tidak perlu ditulis dalam bahasa Inggeris. Lihat cebisan kod di bawah.

HTML membenarkan atribut class buat semua unsur yang sah dalam bahagian badan ("body") dokumen HTML, termasuklah unsur body itu sendiri. Hakikat ini membolehkan pereka sesawang untuk membezakan antara unsur sejenis yang digunakan dalam konteks berlainan. Misalnya, dalam dokumen teknikal tentang HTML, pereka dapat membezakan unsur HTML dengan atribut HTML.

Atribut <code class="atribut">alt</code> unsur <code class="unsur">img</code>

Pemilih kelas membolehkan kita mengenakan peraturan CSS berlandaskan kelas unsur.

Cara pertama adalah dengan membuat kelas sejagat ("global class"), yang dapat ditambah pada apa jua unsur. Kita lakukan ini begini:

 .mustahak {
   font-weight:bold; color:red;

Peraturan ini akan membuat apa jua unsur yang memiliki kelas mustahak menjadi tebal dan merah, seperti yang dapat dilihat di bawah ini.

<p class="mustahak">Teks Penting</p>
<p>Teks Biasa</p>
<div class="mustahak">Nota kaki Penting</div>

Paparan:

Teks Penting

Teks Biasa

Nota kaki Penting

Cara kedua adalah dengan mengaitkannya pada pemilih jenis. Peraturan ini hanya dikenakan pada unsur-unsur jenis yang ditetapkan dan terdiri daripada kelas yang juga telah ditetapkan.

 p.kanan {
   float:right;
   clear:both

Sampel HTML:

 <p class="kanan">Kanan, kanan</p>

Contoh paparan (lihat kanan):

Kanan, kanan

Sesuatu unsur boleh menjadi ahli lebih daripada satu kelas, contoh:

 <p class="kanan">Perenggan ini milik kelas 'right'.</p>
 <p class="mustahak">Perenggan ini milik kelas 'mustahak'.</p>
 <p class="kanan mustahak>Perenggan ini milik kedua-dua kelas.</p>

Contoh paparan:

Perenggan ini milik kelas 'kanan'.

Perenggan ini milik kelas 'mustahak'.

Perenggan ini milik kedua-dua kelas.

Nama-nama kelas seharusnya memerikan tujuan kelas contoh, "mustahak", dan bukannya kesan kelas, contoh, "merah". Jika anda menamakan kelas mengikut kesan dan kemudian anda menukar fikiran tentang penglihatan yang anda mahu, anda mungkin akhirnya menulis peraturan seperti ini:

 .merah {color:blue}

Jika perlu pemilih berganda, kelas boleh digunakan untuk memilih hanya unsur yang menjadi ahli kelas-kelas tertentu, misalnya:

p.mustahak.kanan {
  border: 2px dashed #666
}

Paparan:

Perengggan ini milik kelas 'kanan'.

Perenggan ini milik kelas 'mustahak'.

Perenggan ini dimiliki kedua-dua kelas.

ID

Nota: Pemilih ID bekerja dengan dokumen-dokumen (X)HTML. Ia tidak bekerja dengan dokumen XML biasa melainkan Agen Pengguna (pelayar web atau pembaca dokumen lain) dapat menentukan atribut yang mana menjadi atribut ID buat unsur-unsur yang terdapat dalam dokumen. Dalam dokumen-dokumen (X)HTML, id ditakrifkan sebagai atribut ID attribute.

Pemilih ID digunakan bagi memilih stau item yang terdapat dalam laman. Ia memadankan atribut id sesuatu unsur. Atribut id tidak boleh dikongsi oleh lebih daripada satu unsur.

cf pemilih "Kelas"

Walau bagaimanpun, halaman yang berlainan dalam sesuatu tapak sesawang boleh mengguna semula sesuatu id. Ini sering berlaku dalam bahagian-bahagian besar laman, misalnya "kandunganUtama", palangNavigasi" dan sebagainya. Ia sering digunakan bersama-sama pemilih turunan, misalnya bagi mengenakan gaya item-item dalam senarai pada palang navigasi tanpa mengganggu senarai yang hadir dalam kandungan utama.

Gaya menulis pemilih adalah bebas, gaya yang digunakan dalam cebisan kod di bawah hanyalah kebiasaan sesetengah pengatur cara

Peraturan CSS:

 #hanyaYangIni {
   font-family:courier;
 }

HTML:

 <p id="hanyaYangIni">Courier</p>

Paparan:

Courier

Sejagat

Pemilih-pemilih ini mengenakan gaya pada semua item dalam laman. Contoh, untuk membuat semua teks kelihatan hijau, gunakan peraturan:

 * {
   color:green;
 }

Pseudokelas

Pseudokelas dan pseudounsur membolehkan unsur-unsur diformat berlandaskan maklumat selain daripada tempat letak unsur dalam pohon dokumen. Pseudokelas dan pseudounsur didahului oleh tanda titik berganda, :, dengan CSS1 dan CSS2.1. Dengan CSS3 pseudounsur didahului ::.

CSS tahap 1 mendefinisikan tiga pseudokelas:

link

pautan belum dilawati

visited

pautan yang sudah dilawati

active

pautan aktif

Ini boleh dikenakan pada unsur-unsur penambat (anchor, a).

 a:link{
   color:blue;
 }

 a:visited{
   color:purple;
 }

 a:active{
   color:red;
 }

CSS tahap 2.1 memperkenalkan beberpa pseudokelas tambahan termasuk hover (terapung). Pseudokelas hover dapat digunakan bagi mewujudkan kesan gulung lampau (rollover) tanpa mengguna Javascript.

CSS2.1 juga membenarkan active dikenakan terhadap mana-mana unsur yang dapat menjadi aktif, misalnya, sesuatu butang.

Psudokelas tambahan CSS 2.1 adalah:

first-child

memadankan mana-mana unsur yang menjadi anak pertama induknya.

lang(...)

memadankan bahasa unsur. Bahasa boleh diset secara langsung pada unsur atau diwarisi daripada unsur leluhur. Kod bahasa yang sah perlu hadir dalam kurungan: en bagi mana-mana varian bahasa Inggeris atau en-gb bagi bahasa Inggeris British.

hover

dikenakan apabila tetikus terapung di atas unsur.

active

kini dibenarkan buat mana-mana unsur yang dapat menjadi 'aktif' – dikenakan selagi unsur menjadi aktif.

focus

dikenakan selagi unsur mendapat fokus kekunci.

Although CSS2.1 allows hover on any element Internet Explorer only allows it on anchor elements.

Examples:

  p:first-child {
    font-size:120%
  }

  span:lang(la) { /* render Latin text, e.g. per se, in italics */
    font-style:italic
  }

  li:hover { /* doesn't work in Internet Explorer */
    background-color:blue
  }

  input:active {
    color:red
  }

  input:focus {
    background-color:yellow
  }

An example of the first-child pseudo-class is given at the end of the descendant selector section.

Multiple pseudo-classes may be specified, e.g. to warn the user that they are hovering over a link they have already visited:

a:visited:hover {
  background-color:red
}

Care should be taken over the order of rules using pseudo-classes. For example, if you want visited links to be green except whilst the user hovers over them, when they should be yellow, the rules must be in the following order:

 a:visited{
   color:green
 }

 a:hover{
   color:yellow
 }

If the rules were reversed the cascade would mean that the visited color would take precedence over the hover color. Visited links would remain green even when the user hovered over them.

Pseudo-Elements

Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, :, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by ::.

CSS level 1 defines two pseudo-elements, first-letter and first-line, which select the first letter and line of the rendered element respectively. These can be used to apply typographic effects, e.g. to create a drop cap at the start of a paragraph.

 p:first-letter { color:red } 

Only one pseudo-element selector may be used and it must be the last part of the selector chain. The first-line selector may only be applied to block-level elements, inline-blocks, table captions and table cells.

CSS2.1 adds two more pseudo-elements, before and after.

Starting in CSS3 pseudo-elements are prefixed with :: rather than :.

Simple selectors

The selectors described above (type, class, ID, universal, pseudo-class and pseudo-element) are all examples of simple selectors. The full syntax for a simple selector is:

• a type selector or the universal selector
• zero, one or more class, ID and pseudo-class selectors (CSS2.1 also allows attribute selectors)
• zero or one pseudo-element selectors

The following are all examples of simple selectors:

  p
  p.important
  p#navigation
  a:link
  p:first-line
  a:visited#homePage.menu2:first-letter
  *
  *#footer
  *.content.abstract
  *#mainArticle:first-letter

As a shorthand notation the universal selector, *, may be omitted if it is not the only component of the simple selector. For example, #footer is equivalent to *#footer and :first-line is equivalent to *:first-line.

Combining simple selectors: Simple selectors can be combined to take the context of the element in to account. For example you might want to apply a rule only to list elements in the navigation bar.

Descendant

Descendant selectors allow you to apply style to elements that are nested within another specified element. For example, you could have every span element inside of every p element be bold. The span can be a child element of the p element, or a grandchild, or a great-grandchild, etc.

CSS rule:

 p span{
   font-weight:bold;
 }

Sample HTML:

 <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p>
 <div>Start of division. <span>This span is normal.</span> Rest of division.</div>

Example rendering:

Start of paragraph. This span is bold. Rest of paragraph.

Start of division. This span is normal. Rest of division.

The next example changes the color of visited links in the navigation section. Visited links in other parts of the document would be unaffected.

CSS rule:

 ul#navigation a:visited {
   color:red
 }

Sample HTML:

 <ul id="navigation">
   <li><a href="HomePage">Home</a></li>
   <li><a href="AnotherPage">A page you haven't visited yet.</a></li>
 </ul>

Example rendering:

• Home
• A page you haven't visited yet.

An example using the first-child selector.

CSS rule:

 div.content strong:first-child {
   color:red
 }

Sample HTML:

 <div class="content">
   <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p>
   <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p>
 </div>

Example rendering:

Some emphasized text and some strongly emphasized text.

Some strongly emphasized text and some emphasized text.

Two important points to note:

• an element is still the first child if it is preceded by text, so the em element in the first paragraph and the strong element in the second paragraph are the first children of their respective paragraphs.
• a rule is only applied to an element if it matches all parts of the selector. The strong element in the first paragraph is a second child, so it is not matched by the strong:first-child selector.

Grouping selectors

Selectors can be grouped into comma separated lists.

h1, h2, h3 { text-align:center; }

is equivalent to

h1 { text-align:center; }
h2 { text-align:center; }
h3 { text-align:center; }

An element may be selected by more than one rule:

 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }
 h1 { color:yellow } 

All headings will have a red background. Level 2–6 headings will have white text. Level 1 headings will have yellow text.

The order of the rules is significant. In the following example all headings would have white text.

 h1 { color:yellow } 
 h1, h2, h3, h4, h5, h6 { color: white; background-color: red; }

When more than one rule applies to an element the cascade is used to determine the resulting style applied to the element.

Later CSS versions

Additional selectors in CSS 2.1:

• Child selectors
• Adjacent sibling selectors
• Attribute selectors
• More pseudo-classes and pseudo-elements.

Additional selectors in CSS 3:

• More sibling selectors
• More attribute selectors
• More pseudo-classes and pseudo-elements.