Jenis-Jenis Selektor CSS


Hai sobat Artikel Multimedia, sebelumnya kita sudah pernah membahas tentang selektor id dan class  css. Namun pada postingan kali ini kita akan manjabarkan lebih rinci tentang selektor css. Selektor digunakan untuk menemukan atau menyeleksi elemen html yang ingin diberikan style. Secara garis besar terdapat 5 selektor dalam css yang terdiri dari: 

  1. Selektor sederhana (simple selectors): name, id, dan class.
  2. Selektor kombinasi (combinator selectors): descendant, child, adjacent sibling, dan general sibling.
  3. Selektor kelas semu (pseudo-class selectors)
  4. Selektor elemen semu (pseudo-elements selectors)
  5. Selektor atribut (atrribute selectors)

 

Berikut ini contoh penggunaan atau penerapan masing-masing selektor css ke dalam html:


File html (index.html):
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh Selektor CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 
    <h1 id="judul">Belajar Selektor CSS</h1>
 
    <p class="deskripsi">Ini adalah contoh penggunaan berbagai selektor CSS.</p>
 
    <div class="container">
        <p>Paragraf di dalam div (akan dipengaruhi descendant selector).</p>
 
        <p class="khusus">Paragraf dengan class "khusus".</p>
 
        <ul>
            <li>Item 1</li>
            <li class="item-khusus">Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
 
    <h2>Sibling Selector</h2>
    <p>Paragraf setelah h2 (dipengaruhi adjacent sibling).</p>
    <p>Paragraf kedua setelah h2 (dipengaruhi general sibling).</p>
 
    <input type="text" placeholder="Ketik sesuatu...">
    <input type="password" placeholder="Password...">
 
</body>
</html>

 

File css (style.css):

/* 1. Selektor name */
p {
    color: rgb(60, 60, 60);
}
 
/* 2. Selektor ID */
#judul {
    color: blue;
    font-size: 28px;
}
 
/* 3. Selektor Class */
.deskripsi {
    font-style: italic;
}
 
.khusus {
    color: purple;
    font-weight: bold;
}
 
.item-khusus {
    color: blue;
}
 
/* 4. Selektor Universal */
* {
    margin: 5px;
}
 
/* 5. Selektor Atribut */
input[type="password"] {
    border: 2px solid red;
}
 
/* 6. Descendant Selector */
.container p {
    background: #f4f4f4;
    padding: 5px;
}
 
/* 7. Child Selector */
.container > ul > li {
    list-style-type: square;
}
 
/* 8. Adjacent Sibling Selector atau Next Sibling Combinator*/
h2 + p {
    color: green;
    font-weight: bold;
}
 
/* 9. General Sibling Selector atau Subsequent-sibling combinator*/
h2 ~ p {
    font-size: 18px;
}
 
/* 10. Pseudo-class */
input:focus {
    border-color: blue;
    outline: none;
}
 
/* 11. Pseudo-element */
p::first-letter {
    font-size: 20px;
    color: red;
}
 
p::after {
    content: " ✔";
    color: orange;
}

Selektor CSS


Mengenai kode html dan css tersebut, maka dapat disimpulkan bahwa: 

  • p merupakan contoh selektor name
  • * merupakan contoh selektor universal
  • #judul merupakan contoh selektor id karena menggunakan tanda # (pagar)
  • .deskripsi, .khusus dan .item-khusus merupakan contoh selektor class karena menggunakan tanda . (titik)
  • .container p merupakan contoh selektor descendant karena menggunakan spasi
  • .container > ul > li merupakan contoh selektor child kerena menggunakan tanda >
  • h2 + p merupakan contoh selektor adjacent sibling karena menggunakan tanda +
  • h2 ~ p merupakan contoh selektor general sibling karena menggunakan tanda ~
  • input[type=”password”] merupakan contoh selektor atribut karena menggunakan atribut atau nilai
  • p::after dan p::first-letter merupakan contoh selektor elemen semu karena menggunakan tanda :: (titik dua 2 kali) 
  • input:focus merupakan contoh selektor kelas semu karena menggunakan tanda : (titik dua)


Sekian pembahasan tentang jenis-jenis selektor css, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih … 

Tags:

Posting Komentar

0 Komentar

Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda