Close Menu

Selektor CSS

Table of Contents

Selektor CSS digunakan untuk memilih elemen HTML yang akan diberikan gaya tertentu. CSS menyediakan berbagai jenis selektor yang memungkinkan Anda untuk mengatur gaya elemen dengan cara yang sangat fleksibel dan spesifik. Berikut adalah penjelasan mengenai beberapa selektor CSS yang paling umum digunakan.

Selektor Elemen #

Selektor elemen memilih semua elemen HTML dengan nama tag tertentu.

p {
    color: blue;
}

Contoh:

<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
<!-- Keduanya akan memiliki teks berwarna biru -->

Selektor Class #

Selektor class memilih semua elemen yang memiliki atribut class tertentu. Class didefinisikan dengan tanda titik (.) diikuti oleh nama class.

.highlight {
    background-color: yellow;
}

Contoh:

<p class="highlight">Ini adalah paragraf yang disorot.</p>
<p>Ini adalah paragraf biasa.</p>
<!-- Hanya paragraf pertama yang akan memiliki latar belakang kuning -->

Selektor ID #

Selektor ID memilih elemen yang memiliki atribut ID tertentu. ID didefinisikan dengan tanda pagar (#) diikuti oleh nama ID. Setiap ID harus unik dalam satu halaman.

#main-heading {
    text-align: center;
    color: green;
}

Contoh:

<h1 id="main-heading">Judul Utama</h1>
<p>Ini adalah paragraf biasa.</p>
<!-- Hanya elemen dengan ID "main-heading" yang akan diatur -->

Selektor Atribut #

Selektor atribut memilih elemen yang memiliki atribut tertentu atau atribut dengan nilai tertentu.

input[type="text"] {
    border: 1px solid #000;
}

Contoh:

<input type="text" name="username">
<input type="password" name="password">
<!-- Hanya input teks yang akan memiliki border -->

Selektor Universal #

Selektor universal (*) memilih semua elemen dalam dokumen.

* {
    margin: 0;
    padding: 0;
}

Contoh:

<body>
    <h1>Judul</h1>
    <p>Ini adalah paragraf.</p>
</body>
<!-- Semua elemen akan memiliki margin dan padding 0 -->

Selektor Keturunan (Descendant) #

Selektor keturunan memilih elemen yang merupakan keturunan dari elemen lain.

div p {
    color: red;
}

Contoh:

<div>
    <p>Ini adalah paragraf dalam div.</p>
</div>
<p>Ini adalah paragraf di luar div.</p>
<!-- Hanya paragraf dalam div yang akan berwarna merah -->

Selektor Anak (Child) #

Selektor anak memilih elemen yang merupakan anak langsung dari elemen lain.

ul > li {
    list-style-type: none;
}

Contoh:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>
<!-- Hanya <li> dalam <ul> yang akan tidak memiliki tanda bullet -->

Selektor Sibling #

Adjacent Sibling: Memilih elemen yang merupakan saudara langsung dari elemen lain.

h1 + p {
    margin-top: 0;
}

Contoh:

<h1>Judul</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
<!-- Hanya paragraf pertama yang akan memiliki margin-top 0 -->

General Sibling: Memilih semua elemen yang merupakan saudara dari elemen lain.

h1 ~ p {
    color: gray;
}

Contoh:

<h1>Judul</h1>
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
<!-- Semua paragraf yang mengikuti h1 akan berwarna abu-abu -->

Pseudo-class #

Pseudo-class digunakan untuk memilih elemen berdasarkan keadaan atau interaksi khusus.

a:hover {
    color: red;
}

Contoh:

<a href="#">Tautan</a>
<!-- Tautan akan berubah warna menjadi merah ketika di-hover -->

Pseudo-element #

Pseudo-element digunakan untuk menata bagian tertentu dari elemen.

p::first-line {
    font-weight: bold;
}

Contoh:

<p>Ini adalah kalimat pertama di paragraf ini.</p>
<!-- Baris pertama dari setiap paragraf akan menjadi tebal -->

Contoh Penggunaan Berbagai Selektor #

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Selektor CSS</title>
    <style>
        /* Selektor Elemen */
        p {
            font-size: 16px;
        }

        /* Selektor Class */
        .highlight {
            background-color: yellow;
        }

        /* Selektor ID */
        #main-heading {
            text-align: center;
            color: green;
        }

        /* Selektor Atribut */
        input[type="text"] {
            border: 1px solid #000;
        }

        /* Selektor Universal */
        * {
            margin: 0;
            padding: 0;
        }

        /* Selektor Keturunan */
        div p {
            color: red;
        }

        /* Selektor Anak */
        ul > li {
            list-style-type: none;
        }

        /* Adjacent Sibling */
        h1 + p {
            margin-top: 0;
        }

        /* General Sibling */
        h1 ~ p {
            color: gray;
        }

        /* Pseudo-class */
        a:hover {
            color: red;
        }

        /* Pseudo-element */
        p::first-line {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 id="main-heading">Judul Utama</h1>
    <p class="highlight">Ini adalah paragraf yang disorot.</p>
    <div>
        <p>Ini adalah paragraf dalam div.</p>
    </div>
    <p>Ini adalah paragraf di luar div.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
    <a href="#">Tautan</a>
    <input type="text" name="username">
    <input type="password" name="password">
</body>
</html>

Dengan memahami dan menggunakan selektor-selektor ini, Anda dapat mengatur gaya elemen HTML dengan cara yang lebih fleksibel dan spesifik. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.

What are your Feelings