MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

Selectors define to which elements a set of CSS rules apply.

Dasar Selektor

Type selectors (Jenis-Jenis Seleksi)
Dasar selektor ini memilih seluruh elemen sehingga ditampilkan dengan pemberian nama.
Syntax: eltname
Example: Input akan menampilkan sebuah elemen  <input>.
Class selectors (Selektor Class)
Dasar selektor ini memilih elemen yang didasarkan pada nilai attribut classnya.
Syntax: .classname
Example: .index akan menampilkan sebuah elemen yang mempunyai indeks class (seperti didefenisikan oleh sebuah attribut class="index" atau yang serupa).
ID selectors (selektor ID)
Dasar selektor ini memilih cabangan (nodes) didasarkan pada nilai attribut idnya. Bisa jadi hanya satu elemen dengan sebuah pemberian ID dalam sebuah dokumen.
Syntax: #idname
Example: #toc akan menampilkan elemen yang mempunyai id toc (seperti didefenisikan dengan atrribut id="toc" atau yang serupa).
Universal selectors (selektor seluruhnya)
Dasar selektor ini memilih seluruh nodes (cabangan). Ini juga ada dalam hanya sebuah satu-kumpulan nama (namespace) dan  dalam seluruh kumpulan nama (all-namespace) yang juga bervariasi.
Syntax: * ns|* *|*
Example: * akan menampilkan seluruh elemen dari dokumen.
Attribute selectors (selektor attribut)
Dasar selektor ini memilih nodes (cabangan)  didasarkan pada sebuah nilai dari atributnya.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] akan menampilkan seluruh elemen yang mempunyai attribut autoplay pengaturan (pada sebuah nilai).

Combinators

Adjacent sibling selectors
The '+' combinator selects nodes that immediately follow the former specified element.
Syntax: A + B
Example: ul + li will match any <li> that immediately follows a <ul>.
General sibling selectors
The '~' combinator selects nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p> element inside the same element.
Child selectors
The '>' combinator selects nodes that are direct children of the former specified element.
Syntax: A > B
Example: ul > li will match all <li> elements that are inside a <ul> element.
Descendant selectors
The ' ' combinator selects nodes that are children (not necessary direct children) of the former specified element.
Syntax: A B
Example: div span will match any <span> element that is inside a <div> element.

Pseudo-elements

Pseudo-elements are abstractions of the tree representing entities beyond what HTML does. For example, HTML doesn't have an element describing the first letter or line of a paragraph, or the marker of a list. Pseudo-elements represent these entities and allow CSS rules to be associated with them. that way, these entitities can be styled independently.

Pseudo-classes

Pseudo-classes allow to select elements based on information that is not contained in the document tree like a state or that is particularly complex to extract. E.g. they match if a link has been previously visited or not.

Specifications

Specification Status Comment
Selectors Level 4 Working Draft  
Selectors Level 3 Recommendation  
CSS Level 2 (Revision 1) Recommendation  
CSS Level 1 Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 3.0 3.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.5 1.0 (1.9.2) ? ? 3.2

Tag Dokumen dan Kontributor

 Kontributor untuk laman ini: dedy_serang, Sebastianz
 Terakhir diperbarui oleh: dedy_serang,