Apa itu Combinators di dalam CSS

Kita sudah mengetahui beberapa basic selector yang ada pada CSS. Tidak hanya sampai disitu, CSS Selector dapat berisi lebih dari satu basic selector. Di antara basic selector, kita dapat menyertakan sebuah kombinator.

Ada empat kombinator yang dapat kita gunakan yaitu: Adjacent Sibling Selector, General Sibling Selector, Child Selector, dan Descendant Selector.

Adjacent Sibling Selector (+)

Adjacent Sibling Selector menggabungkan dua buah basic selector dengan menggunakan tanda + di antara keduanya. Contohnya seperti ini:


  1. img + p {

  2.    color: green;

  3. }


Adjacent Sibling Selector terdiri dari dua buah target elemen, namun hanya elemen kedua yang menerapkan rule selama elemen tersebut dituliskan langsung setelah elemen pertama pada berkas HTML. Selain itu kedua elemen tersebut harus berada di dalam induk elemen yang sama. Pada contoh di atas rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen gambar. Berikut contoh penerapannya:


  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.        /* Rule akan diterapkan pada elemen paragraf yang berada tepat setelah elemen img */

  7.        img + p {

  8.            color: green;

  9.        }

  10.    </style>

  11. </head>

  12. <body>

  13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>

  14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">

  15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini seharusnya menerapkan rule dengan menampilkan teks berwarna hijau.</p>

  16. <p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen gambar, namun tidak diletakkan persis setelahnya, sehingga rule tidak akan diterapkan pada elemen ini.</p>

  17. </body>

  18. </html>


Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
201912061740003bd2e2e876b782d33f749ddeb76cd814.png

General Sibling Selector (~)

Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada seluruh elemen kedua yang berada setelah elemen pertama. Dengan catatan, induknya sama, walaupun posisi dari elemen kedua tidak berada tepat setelahnya. General Sibling Selector menggunakan tanda ~ untuk menetapkan elemenya. Contohnya seperti berikut:


  1. img ~ p {

  2.    color: green;

  3. }


Rule di atas akan diterapkan pada elemen paragraf yang berada setelah elemen img selama masih di dalam induk yang sama.


  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.        /* Rule akan diterapkan pada elemen header yang berada tepat setelah elemen img */

  7.        img ~ p {

  8.            color: green;

  9.        }

  10.    </style>

  11. </head>

  12. <body>

  13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen paragraf ini.</p>

  14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">

  15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka paragraf ini menerapkan rule dengan menampilkan teks berwarna hijau.</p>

  16. <div>

  17.    <p>Ini merupakan paragraf ketiga, letaknya setelah elemen gambar, namun paragraf ini dibungkus di dalam div sehingga paragraf ini tidak akan menerapkan rule styling karena tidak memiliki induk yang sama.</p>

  18. </div>

  19. <p>Ini merupakan paragraf empat. Letaknya memang setelah elemen gambar dan memiliki induk yang sama seperti elemen gambar, sehingga elemen ini akan menerapkan rule dengan menampilkan teks berwarna hijau.</p>

  20. </body>

  21. </html>


Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
2019120617413900ab76e2491a5487f5f1105c0089c1ff.png

Child Selector (>)

Child Selector menggabungkan dua buah basic selector dengan menggunakan tanda greater than (>) di antara basic selector-nya. Contohnya sebagai berikut:

  1. div > p {

  2.    background-color: yellow;

  3. }


Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang berada di dalam elemen div secara langsung. Dalam arti lain, elemen paragraf merupakan child dari elemen div bukan sebuah hanya turunannya. Untuk lebih jelas, perhatikan contoh penerapannya berikut:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.        /* Rule akan diterapkan pada elemen paragraf yang merupakan child dari elemen div */

  7.        div > p {

  8.            background-color: yellow;

  9.        }

  10.    </style>

  11. </head>

  12. <body>

  13. <div>

  14.    <p>Paragraf pertama. di dalam div.</p>

  15.    <p>Paragraf kedua. di dalam div.</p>

  16.    <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen secara langsung.</p></section>

  17.    <p>Paragraf keempat. di dalam div.</p>

  18. </div>

  19. <p>Paragraf kelima. di luar div.</p>

  20. <p>Paragraf keenam. di luar div.</p>

  21. </body>

  22. </html>


Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
20191206174328e7af4d4dc2b4b81e3d70c59da7c16763.png

Descendant Selector (space)

Descendant Selector mirip seperti child selector namun hierarkinya lebih luas, karena rule akan diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara tidak langsung. Basic selector pertama yang dituliskan pada selector ini menjadi induknya dan basic selector yang kedua merupakan akan menerapkan rule. Selector ini menggunakan spasi dalam menggabungkan dua basic selector. Contohnya sebagai berikut:

  1. div p {

  2.    background-color: yellow;

  3. }


Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang merupakan turunan dari elemen div. Berikut contoh penerapannya:

  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4.    <title>Judul Dokumen</title>

  5.    <style>

  6.        /* Rule akan diterapkan pada elemen paragraf yang merupakan turunan dari elemen div */

  7.        div p {

  8.            background-color: yellow;

  9.        }

  10.    </style>

  11. </head>

  12. <body>

  13. <div>

  14.    <p>Paragraf pertama. di dalam div.</p>

  15.    <p>Paragraf kedua. di dalam div.</p>

  16.    <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen secara langsung.</p></section>

  17.    <p>Paragraf keempat. di dalam div.</p>

  18. </div>

  19. <p>Paragraf kelima. di luar div.</p>

  20. <p>Paragraf keenam. di luar div.</p>

  21. </body>

  22. </html>


Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti berikut:
201912061745523ae1fff5bf155a33b8f6bdc6e5d2b8ee.png

Komentar

Posting Komentar