CSS Membantu Anda Menata Tampilan WebCSS sangat mudah digunakan. CSS (Cascading Style Sheets) juga tidak terlalu sulit untuk digunakan untuk mengatur halaman dalam pengembangan web-ini yang membuat semuanya terlihat, yah... cantik bukankah menurut Anda AHHNDREW? Namun, jika Anda ingin membuka manfaat CSS sepenuhnya, mengetahui cara terbaik untuk menargetkan elemen tertentu sangatlah penting. Dengan penyeleksi CSS sederhana seperti elemen, kelas dan ID sangat berguna, namun tingkat lanjutan dari penyeleksi akan menyelesaikan dengan lebih presisi dan juga fleksibilitas. Pada artikel ini, kita akan memahami selektor CSS tingkat lanjut yang akan membantu Anda meningkatkan permainan gaya Anda dan memastikan Anda bisa menjadi seorang profesional yang menjangkau setiap elemen di bawah matahari.
1. Pemilih Atribut
Selektor Atribut - Selektor atribut menargetkan atribut elemen dan nilainya, misalnya_enqueue_Style ( 'prefix-style', get_template_directory_uri(). Bahkan mengelompokkan elemen HTML dari tag yang sama yang hanya berbeda pada atributnya.
● [atribut]: Memilih elemen yang memiliki atribut tertentu, apa pun nilainya.
input[type] {
border: 1px solid #000;
}
Ini akan memilih semua bidang input yang memiliki atribut tipe.
● [attribute=value]: Menargetkan elemen dengan atribut dan nilai tertentu.
input[type="text"] {
background-color: #f0f0f0;
}
Di sini, hanya bidang input teks yang akan diberi gaya.
● [attribute^=value]: Menargetkan elemen yang nilai atributnya dimulai dengan string yang ditentukan.
a[href^="https"] {
color: green;
}
Pemilih ini menata tautan yang dimulai dengan “https”.
● [attribute$=value]: Memilih elemen yang nilai atributnya diakhiri dengan string yang ditentukan.
img[src$=".jpg"] {
border: 2px solid blue;
}
Gambar dengan ekstensi .jpg akan memiliki garis tepi berwarna biru.
● [attribute*=value]: Memilih elemen yang nilai atributnya berisi string yang ditentukan.
a[href*="example"] {
text-decoration: underline;
}
Semua tautan yang mengandung “contoh” dalam URL-nya akan digarisbawahi.
2. Penyeleksi Kelas Semu
Selektor kelas semu menargetkan elemen berdasarkan status atau posisinya di dalam DOM. Selektor ini sangat ampuh saat menata elemen interaktif.
● :hover: Menargetkan elemen saat pengguna mengarahkan kursor ke elemen tersebut.
button:hover {
background-color: #008cba;
color: white;
}
Tombol gaya ini ketika dilayangkan di atas.
● :nth-child(n): Memilih elemen berdasarkan posisinya dalam elemen induk.
li:nth-child(2) {
font-weight: bold;
}
Item daftar kedua (li) akan memiliki teks yang dicetak tebal.
● :nth-of-type(n): Mirip dengan :nth-child, tetapi hanya mempertimbangkan elemen dengan tipe yang sama.
p:nth-of-type(2) {
color: red;
}
Elemen p kedua pada induknya akan memiliki teks berwarna merah, terlepas dari jenis elemen lainnya.
● :not(selector): Menargetkan elemen yang tidak cocok dengan pemilih.
input:not([type="submit"]) {
margin-bottom: 10px;
}
Ini menerapkan margin ke semua bidang input kecuali tombol kirim.
3. Pemilih Elemen Semu
Elemen semu memungkinkan Anda untuk menata bagian dari sebuah elemen. Ini sangat berguna saat Anda ingin memberi gaya pada bagian teks tertentu atau menambahkan konten sebelum atau sesudah elemen.
● ::before and ::after: Menyisipkan konten sebelum atau sesudah elemen.
h1::before {
content: "★ ";
color: gold;
}
Ini akan menambahkan bintang emas sebelum setiap h1.
● ::first-letter: Menargetkan huruf pertama dari sebuah elemen.
p::first-letter {
font-size: 2em;
color: darkblue;
}
Huruf pertama setiap paragraf akan lebih besar dan berwarna biru.
● ::first-line: Memberi gaya pada baris pertama teks dalam sebuah elemen.
p::first-line {
font-weight: bold;
}
Baris pertama paragraf akan muncul dalam huruf tebal.
4. Kombinator
Kombinator mendefinisikan hubungan antara dua atau lebih selektor CSS dan memungkinkan Anda untuk menargetkan elemen berdasarkan hubungannya dalam struktur DOM.
● Pemilih Keturunan (spasi): Menargetkan elemen yang merupakan keturunan dari elemen lain.
Semua elemen p di dalam elemen div akan diberi warna abu-abu.
● Pemilih Anak (>): Menargetkan elemen yang merupakan anak langsung dari elemen lain.
ul > li {
list-style-type: square;
}
Hanya item daftar anak langsung (li) dari daftar yang tidak diurutkan (ul) yang akan memiliki peluru persegi.
● Pemilih Saudara Kandung Berdekatan (+): Memilih elemen yang langsung didahului oleh elemen tertentu.
Ini menargetkan elemen p yang berada tepat setelah h1 dan menghilangkan margin atas.
● Pemilih Saudara Kandung Umum (~): Memilih semua saudara kandung dari elemen yang mengikutinya.
Semua elemen p yang mengikuti h2 akan berwarna biru.
Kesimpulan
Hal ini membantu Anda dalam menata halaman web dengan lebih akurat dan dengan kontrol yang lebih baik ketika Anda menguasai selektor CSS tingkat lanjut. Kompilasi fitur-fitur CSS tingkat lanjut mulai dari penyeleksi atribut hingga kombinator akan memungkinkan Anda untuk menulis lebih sedikit kode dengan kekuatan dan kekhususan yang lebih besar. Menggabungkan teknik-teknik ini memungkinkan Anda untuk menargetkan elemen seperti seorang profesional dan membuat desain web Anda lebih dinamis sekaligus membuatnya lebih ringan. Ini berarti bahwa pada saat Anda menulis CSS berikutnya, tinggalkan cara-cara dasar dan manfaatkan selektor berkinerja tinggi ini untuk membuat lembar gaya Anda lebih cerdas dan lebih ramping.
