Apa itu CSS Combinators

Apa itu CSS Combinators ?. Yang dimaksud dengan CSS Combinators adalah sesuatu yang berkaitan dengan relasi / hubungan antar selector. Hubungan yang terjalin antar elemen HTML. Karena terkadang ada elemen pada HTML yang berada di dalam elemen lain. Elemen yang berada di dalam elemen lain inilah yang disebut elemen anak. Untuk lebih memperjelas Apa itu CSS Combinators, langsung saja ke pengaplikasiannya. Berikut jenis – jenis dari Combinators tersebut :

Descendat Selector (Selector Turunan),

hanya menyeleksi selector yang menjadi turunan dari selector parent, dan cara penggunaanya dengan menggunakan Spasi. Contoh :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Apa itu Combinators pada CSS

Adjacent Sibling Selector

(Selektor Saudara Terdekat) hanya akan menyeleksi elemen pertama dari elemen yang berada di luar parent. Elemen yang di seleksi ini berada di luar parent, namun elemen ini harus sama seperti elemen yang berada di dalam parent, artinya jika elemen yang berada di dalam parent adalah elemen <p> maka elemen yang berada di luar parent juga harus <p>. Cara penggunaanya adalah dengan menggunakan tanda + (plus).

Contoh :

Dan di bawah ini adalah hasil dari kode sumber di atas :

Apa itu CSS Combinators

Child Selector

(Selektor Anak) hanya akan menyeleksi elemen yang menjadi child sebenarnya dari elemen yang menjadi Cara menerapkannya adalah dengan menggunakan > (lebih dari).

Dan di bawah ini adalah hasil dari kode sumber di atas :

Child Selector pada css

Maka elemen yang terpilih hanya anak 1 dan anak 2, karena pada anak ketiga elemen <p> berada di dalam elemen <b>.

<b><p>Anak 3</p></b>

Anggap saja anak 3 ini lahir dari ibu yang lain (Saudara Tiri).

General Sibling Selector

(Selektor Saudara) hanya akan menyeleksi elemen yang berada di luar parent, namun haruslah elemen yang sama dengan elemen yang berada di dalam parent. Cara menggunakannnya adalah dengan menggunakan tanda ~ (ingkar).

Dan di bawah ini adalah hasil dari kode sumber di atas :

General Sibling


Demikiant tutorial dari Apa itu CSS Combinators, silahkan kunjungi tutorial CSS lainnya seperti outline pada css, apa yang dimaksud floating pada css dan margin pada css.

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Apa itu CSS Combinators”

× Contact Us