Cara Penggunaan General Sibling Combinator pada CSS

Cara Penggunaan General Sibling Combinator pada CSS - Pada CSS terdapat beberapa combinator yang berfungsi untuk mendeskripsikan atau menjelaskan hubungan antara selector. Secara umum ada empat combinator yang terdapat pada CSS yaitu : descendant selector (space), child selector (>), adjacent sibling selector (+) dan general sibling selector (~), dimana combinator tersebut bisa digunakan untuk memilih selector. Nah, kali ini saya akan bahas salah satu dari combinator diatas yakni general sibling (~) dan sekaligus bagaimana cara penggunaann general sibling. Simak selengkapnya berikut ini.

General Sibling Combinator

General sibling bisa digunakan untuk memilih semua elemen child setelah elemen yang dipilih yang dimiliki oleh satu parent elemen tertentu.

Contoh sebagai berikut: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 ~ p {
            background: red;
        }
    </style>
</head>
<body>
    <p>paragraf 1</p>
    <h1>Judul</h1>
    <p>paragraf 2</p>
    <p>paragraf 3</p>
    <p>paragraf 4</p>
</body>
</html>

Dari kode diatas berarti kita memilih semua elemen p setelah elemen h1 yang dimiliki satu parent elemen yakni body.

Saya akan kasih contoh yang lebih menarik dari penggunaan general sibling dengan dikombinasikan dengan efek hover dan transition seperti berikut.

Silahkan ketikan kode HTML seperti berikut untuk membuat objek yang akan dikenai efek hover dan transisi.

<body>
    <div class="container">
        <div class="box-1 relative">
            <div class="absolute">1</div>
        </div>
        <div class="box-2">2</div>
        <div class="box-3">3</div>
    </div>
</body>

Kemudian ketikan kode CSS untuk memberikan efek dan transisi pada objek dan tentunya memilih objek dengan menggunakan general sibling combinator seperti berikut.

.container {
    margin-top: 50px;
}
.box-1, .box-2, .box-3 {
    background: #009688;
    width: 100px;
    height: 100px;
    float: left;
    margin-left: 10px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    line-height: 100px;
    color: white;

    position: relative;

    transition-duration: 1s;
    transition-timing-function: linear;
}
.absolute {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #4cd137;
    left: 12px;
    top: -35px;
    border: 3px solid white;
    border-radius: 50%;
    text-align: center;
    line-height: 70px !important;
}
.box-1:hover~.box-2 {
    background: #E91E63;
    border-radius: 50%;
}
.box-2:hover~.box-3 {
    background: #FF9800;
    border-radius: 50%;
}

Silahkan simpan filenya kemudian buka dibrowser untuk melihat hasilnya. 
Baiklah cukup sekian pembahasan mengenai Cara Penggunaan General Sibling Combinator pada CSS, semoga bermanfaat :)

26 Agustus 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat