Cara Penggunaan General Sibling Combinator pada CSS

26/08/2019    Risman Hakim    246     Website

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

HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More