Kamu dapat menyebutkan elemen-elemen anak. Mereka adalah elemen-elemen yang secara langsung merupakan anak dari elemen lain. Ini terdengar agak abstrak, tetapi dapat dijelaskan dengan baik melalui contoh.
<body> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p> </body>
Di sini, body adalah elemen induk. Elemen-elemen p adalah masing-masing elemen anak dari body. Dengan membangun pengetahuan ini, selector elemen-anak dapat diterapkan.
body>p {
color: biru;
}
Sintaks ini akan membuat semua paragraf yang merupakan anak langsung dari body menjadi berwarna biru.
Contoh berikut menunjukkan lagi perbedaan antara dua perintah body p dan body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>Tiga paragraf teks p yang ditetapkan pertama adalah anak langsung dari body. Perintah body p memberi warna biru pada semua paragraf teks. body>p, sebaliknya, hanya mempengaruhi tiga paragraf teks pertama. Oleh karena itu, paragraf-paragraf ini juga ditampilkan dalam ukuran font yang lebih besar.
Next, saya akan memperkenalkan kepada kalian selector elemen berikutnya. Selector ini menunjukkan suatu elemen yang berada tepat setelah elemen lain dan memiliki elemen induk yang sama. Sekali lagi, berikut contohnya:
h1+p {
color: biru;
}
Dengan sintaks ini, warna teks paragraf diatur menjadi biru. Namun, ini hanya berlaku jika paragraf tersebut langsung mengikuti judul tingkat pertama.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: biru;
}
</style>
</head>
<body>
<h1>Judul</h1>
<p>Paragraf 1</p>
<h2>Judul</h2>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<div>
<p>Paragraf 4</p>
</div>
</body>
</html>Lihat hasilnya di browser.
Hanya paragraf pertama yang ditampilkan dalam tulisan biru di sini. Paragraf lainnya berwarna hitam. Hal ini disebabkan karena elemen-elemen p ini tidak mengikuti h1, tetapi mengikuti h2.
Terakhir, mengenai element berikutnya, di CSS3 juga dikenalkan kemungkinan tambahan. Mulai sekarang, memungkinkan untuk mengakses semua elemen berikut dari suatu elemen tertentu. Sebagai contoh:
h1~p {
color: merah;
}
Dengan sintaks ini, semua paragraf yang mengikuti h1 akan dipengaruhi.
Selain itu, tidak hanya elemen yang bisa diakses secara langsung. Akses juga dapat dilakukan melalui atribut-atribut elemen.
Berikut beberapa selektor ini:
• [att] – Elemen hanya perlu mengandung atribut tersebut. Apakah nilai akan diberikan atau tidak, tidak masalah.
• a[href] – Semua hyperlink (<a href=…>) akan ditandai. Namun, hal ini tidak berlaku untuk definisi anchor (<a name=…>).
• [align=left] – Menandai semua elemen yang memiliki atribut align dengan nilai left.
• [attr~=value] – Semua elemen yang berisi value dalam daftar nilai yang dipisahkan oleh spasi akan ditandai.
• [attr|=value] – Menandai sebuah elemen jika nilai yang ditentukan berada di awal dari string yang dipisahkan oleh tanda hubung.
• img[width="200"] – Semua gambar dengan lebar 200 piksel akan ditandai.
Sebenarnya, pertanyaan muncul, kapan seharusnya menggunakan selektor atribut semacam ini. Pikirkan misalnya tentang formulir dan checkbox yang didefinisikan di dalamnya. Checkbox - seperti yang kalian ketahui - didefinisikan melalui elemen input. Masalahnya, elemen input juga digunakan untuk mendefinisikan kotak masukan teks normal. Oleh karena itu, tidak mungkin untuk memberikan format yang berbeda untuk checkbox dan kotak masukan teks melalui input. Di situlah selektor atribut tersebut digunakan. Untuk pemahaman yang lebih baik, lihat contoh berikut:
<body> Nama: <input type="text" id="name" /> <br /> Pria: <input type="checkbox" name="gender" id="gender" /> <br /> Wanita: <input type="checkbox" name="gender" id="gender" /> </body>
Berbagai elemen formulir telah didefinisikan di sini.
• sebuah kotak masukan teks
• dua kotak centang
Elemen-elemen ini perlu diformat.
input {
border:3px solid #000;
width: 10em;
}Field-fields diberikan bingkai dan lebar.
Permasalahannya adalah: lebar yang ditentukan seharusnya hanya diterapkan pada kotak masukan teks, namun tidak pada kotak centang. Namun, dengan pemilih elemen, tidak mungkin untuk membedakan antara berbagai jenis bidang. Agar pemilihan semacam itu berhasil, atribut pemilih diatur. Berikut adalah contoh bagaimana hal itu dapat terlihat:
input[type="checkbox"] {
width: auto;
}
Dengan pemilih yang ditunjukkan sebenarnya hanya dapat diakses pada elemen input, yang memiliki kombinasi nilai atribut type="checkbox".
pengulangan
CSS sekarang juga menawarkan kemungkinan untuk mengulangi. Tentu saja pertanyaannya adalah, untuk apa hal seperti itu bisa berguna. Selektor ini berguna misalnya, jika ingin mengubah warna setiap baris kedua dari sebuah tabel. Sebelum saya memperkenalkan selektor yang tersedia, berikut adalah contoh yang sangat tipikal:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Ini adalah daftar pencacahan biasa. Dengan CSS sekarang setiap entri daftar yang ketiga akan diberikan warna latar belakang.
Untuk itu digunakan selektor nth-child(). Melalui selektor ini setiap elemen anak ke-n diakses.
#sprachen li:nth-child(3n) {
background-color: red;
}
Selektor berikut tersedia:
• :root – Melalui selektor :root, akar dokumen bisa diakses.
• :nth-child(n) – Mengarahkan setiap elemen ke-n dalam elemen induk. Selektor ini sangat berguna ketika beberapa elemen ingin dibedakan. Pada n adalah kata kunci tetap, di mana operasi matematika dapat diterapkan. n dapat disamakan dengan nilai 1.
• :nth-last-child(n) – Mengarahkan setiap elemen ke-n dalam sebuah elemen, dengan elemen anak dijelajahi dari belakang.
• :nth-of-type(n)– Mengarahkan setiap elemen ke-n dari jenis HTML yang sama pada level yang sama.
• :nth-last-of-type(n) – Mengarahkan setiap elemen ke-n pada level yang sama, dengan elemen dijelajahi dari belakang.
• :first-child – Mengarahkan elemen anak pertama dalam sebuah elemen.
• :last-child – Mengarahkan elemen anak terakhir dalam sebuah elemen.
• :first-of-type – Mengarahkan elemen pertama dari jenis elemen HTML yang sama dalam sebuah elemen induk.
• :last-of-type – Mengarahkan elemen terakhir dari jenis elemen HTML yang sama dalam sebuah elemen induk.
• :only-child – Mengarahkan elemen yang tidak memiliki elemen saudara dan merupakan satu-satunya elemen anak dalam elemen induk.
• :only-of-type – Mengarahkan elemen yang tidak memiliki elemen saudara dengan jenis HTML yang sama dan dengan demikian merupakan satu-satunya elemen anak dari jenis tersebut dalam elemen induk.
• :empty – Mengarahkan elemen kosong.
Selektor yang diperkenalkan menjadikan penggunaan HTML lebih mudah, karena definisi kelas yang rumit menjadi hal masa lalu.
