Apa itu CSS Combinators

Apa itu CSS Combinators

CSS

51

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 :

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  div p{

  background-color: dodgerblue;

  }

</style>

</head>

<body>

<div>

  <p>Anak 1</p>

  <p>Anak 2</p>

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

</div>

<p>Keponakan 1</p>

<p>Keponakan 2</p>

</body>

</html>

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 :

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  div + p{

  background-color: dodgerblue;

  }

</style>

</head>

<body>

<div>

  <p>Anak 1</p>

  <p>Anak 2</p>

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

</div>

<p>Keponakan 1</p>

<p>Keponakan 2</p>

</body>

</html>

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).

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  div > p{

  background-color: dodgerblue;

  }

</style>

</head>

<body>

<div>

  <p>Anak 1</p>

  <p>Anak 2</p>

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

</div>

<p>Keponakan 1</p>

<p>Keponakan 2</p>

</body>

</html>

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).

XHTML

<!DOCTYPE HTML>

<html>

<head>

<style>

  div ~ p{

  background-color: dodgerblue;

  }

</style>

</head>

<body>

<div>

  <p>Anak 1</p>

  <p>Anak 2</p>

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

</div>

<p>Keponakan 1</p>

<p>Keponakan 2</p>

<b>Orang Lain</b>

</body>

</html>

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

General Sibling


Demikiant tutorial dari Apa itu CSS Combinators.

Keywords: apa itu css combinators, css combinators

Share: