CSS - Selektor

Hai, materi kali ini kita akan membahas tentang selector lanjutan. Sampai pada materi sebelumnya, kita sudah belajar banyak hal tentang aturan penulisan kode, jenis tag khusus, H1 atau p atau H2. Jadi kami benar-benar fokus mempelajari semua yang mencakup elemen yang berbeda dari tipe itu. Namun bagaimana ketika Anda kepikiran tidak ingin semua tautan-nya mempunyai style, hanya beberapa saja di antaranya? Nah, kita akan membicarakannya type selector lanjutan yang akan melakukan semua pekerjaan itu.

Jadi mari kita mulai dengan Selector yang berdasarkan model objek dokumen (DOM). DOM sebenarnya pekerjaan suatu browser yang memecah laman web anda ke dalam struktur seperti pohon. Bisa digunakan dengan bahasa pemrograman apapun, dalam sistem operasi manapun dan lebih canggihnya DOM menjadi sebuah ketentuan yang dikembangkan oleh W3C untuk berinteraksi dengan objek-objek yang ada di dalam HTML, XML, maupun XHTML.

Jadi dengan cara ini, browser tahu bahwa adanya sebuah paragraf berasal langsung setelah tag h1 atau paragraph pada bagian yang sama. Nah disini, style bisa digunakan untuk bagian tertentu dari laman anda, descendant selectors bisa berpikir bahwa elemen misalnya berada di dalam tag nav, dan mengenali bahwa anda hanya membuat style pada semua tautan yang ada di dalam tag nav. Jika Anda ingin menjadi lebih spesifik, bisa menggunakan child selectors.

Agar lebih paham bisa pelajari kode berikut:

<html>
<head>
    <style type="text/css">
    [title] {
  padding:5px 10px;
  display:inline-block;
  text-decoration:none;
}
[title~="css"] {
  background:lightblue;
  color:#FFF;
}

[title*="css"] {
  border-top:solid 5px red;
}
[title|=belajar] {
  border-bottom:solid 5px red;
}


</style>
</head>
<body>


<a href="https://www.sixv.com/cascading-style-sheets/" target="_blank" title="belajar CSS">link 1</a>
<a href="https://www.sixv.com/cascading-style-sheets/css---keunggulan/" title="keunggulan CSS">link 2</a>
<a href="https://www.sixv.com/cascading-style-sheets/css---merancang-web-dengan-css-tambahan/" target="_self" title="merancang web dengan css tambahan">link 3</a>
<a href="https://www.sixv.com/cascading-style-sheets/css---merancang-web-dengan-css-tambahan/" title="aturan penulisan kode">link 4</a>
<a href="https://www.sixv.com/cascading-style-sheets/css---tampilan-dan-visibilitas/" target="_blank" title="css visibilitas">link 5</a>

</body>
</html>

selektor

Diatas kita menggunakan elemen tag

<a>

untuk link, sedangkan penggunaan selector lanjutan ada pada link1, link3, dan link5, dengan selector target. Jadi tidak semua link menggunakan selector lanjutan ini.

Untuk property dan value bisa merujuk kesini:

Selector Contoh Deskripsi Contoh
.class .intro Menyeleksi semua elemen yang memiliki class=”intro”
#id #firstname Menyeleksi elemen yang memiliki id=”firstname”
* * Menyeleksi Semua Elemen
element/tag p Menyeleksi semua elemen p(paragraf)
element,element (pisahkan dengan koma) div, p Menyeleksi semua elemen div dan p
element element div p Menyeleksi semua elemen

yang ada didalam elemen

element>element div > p Menyeleksi semua elemen

yang berada 1 tingkat dari elemen

. pada dasarnya hampir mirip dengan yang div p, namun dikhususkan untuk elemen yang berada 1 tingkat didalamnya tanpa terhalang elemen lain
element+element div + p Menyeleksi elemen

yang ditempatkan langsung setelah elemen

element1~element2 p ~ ul Menyeleksi semua elemen
    yang secara hirarki sejajar dengan elemen

.[attribute] [target] Menyeleksi elemen yang memiliki attribute “target”
[attribute=value] [target=_blank] Menyeleksi elemen yang memiliki attribut target=”_blank”
[attribute~=value] [title~=css] Menyeleksi elemen yang memiliki attribut title yang mengandung kata “css”

Contoh lebih spesifik bisa anda pelajari dilink ini: https://www.w3schools.com/cssref/trysel.asp

Tetapi sekali lagi, ini adalah sesuatu yang Anda akan harus pelajari lebih mendalam, jadi saya ingin memperkenalkan contoh dengan sangat cepat. Semisal dalam HTML saya, saya akan memasukkan sumber saya, pada semua alt, tetapi juga id = “mainLogo”. Kemudian, di css, menggunakan simbol # bersama dengan nama id, browser akan tahu, setiap kali melihat salah satu gambar tersebut, akan memastikan untuk menambahkan border dan margin ini.

Di materi selector, maka id=”” sangat cocok dengan class selector, namun bedanya class dapat diterapkan pada berbagai elemen, bukan hanya satu elemen tertentu di DOM. Jadi idenya, saya ingin menerapkan style pada satu kelompok besar dengan cara yang sama namun, tapi saya tidak mau style mereka semua seperti itu. Seperti saya tidak mau gambar saya berstyle thumbnail, cuman sebagian besarnya saja. Seperti contoh kode diatas, link target hanya beberapa saja. Jadi saya menuliskan code class=”thumb” pada sebagiannya saja, daripada menggunakan #. Dengan “class” anda bisa memberikan aturan sesuai keinginan anda, sehingga browser akan mengetahui halaman anda selain style apapun di image anda, anda juga mengkhususkan style “thumb” berdasarkan class tadi.