Cara menggunakan css selector only parent

Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di HTML dan aturannnya di CSS. Deklarasi aturan-aturan tiap selector diletakkan dalam tanda kurung kurawal. Tiap properti dan nilainya dipisahkan dengan tanda ; (titik koma). Kalian dapat menentukan selector dengan berbagai cara.

Table of Contents Show

Apa itu CSS selector dan contohnya?
Selector CSS apa saja?
Apa fungsi dari ID Selector CSS?
Apa yang dimaksud dengan Class selector?

Universal Selector

CSS Universal Selector (

p {
    color: blue;
}

1) digunakan untuk menyeleksi setiap single element dari tipe element apapun. Artinya, penyeleksian berlaku secara keseluruhan untuk semua single element. Penggunaan Universal Selector ditandai dengan karakter arterisk

p {
    color: blue;
}

1 yang dapat digunakan secara berdiri sendiri ataupun digabungkan dengan tipe selektor lainnya. Berikut contoh kodenya:

* {
    margin: 0;
    padding: 0;
}

Aturan style di dalam selector * akan diterapkan ke setiap elemen dalam dokumen.

Selector Elemen

Namanya memakai nama tag HTML, misalnya body, h1, img, dan seterusnya. Pendeklarasian aturannya cukup dengan menuliskan nama tag sebagai nama selector. Otomatis, elemen HTML terkait akan mengikuti aturan yang ditetapkan. Contohnya sebagai berikut:

p {
    color: blue;
}

Aturan gaya di dalam selector p akan diterapkan ke setiap elemen <p> dalam dokumen dan akan berwarna biru, terlepas dari posisinya di struktur dokumen.

Id Selector

ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Berikut contoh kodenya:

#error {
    color: red;
}

Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Nama selector diawali dengan simbol . (tanda titik). Berikut contoh kodenya:

.blue {
    color: blue;
}

Aturan style di atas membuat semua teks di setiap elemen di dalam dokumen yang memiliki atribut class menjadi warna biru. Tetapi kalian bisa juga membuat hanya beberapa yang menjadi berwarna biru. Sebagai contoh:

p.blue {
    color: blue;
}

Selector Descendant

Descendant selector adalah selector yang bisa diatur secara khusus untuk sebuah ID atau CLASS (parent class atau parent ID) yang dibuat webmaster dalam pendefinisian suatu elemen. Berikut contohnya:

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

Child Selector

Child Selector adalah selector di dalam CSS yang penggunaannya di dasarkan pada struktur urutan tag HTML.

Karena tag-tag HTML dapat berisi tag lain, maka struktur HTML dapat diibaratkan dengan ‘pohon keluarga’. Dimana sebuah tag dapat disebut sebagai ‘induk’ dari tag lain, dan dapat juga disebut sebagai ‘anak’ dari tag lainnya. Istilah ‘anak’ inilah yang menjadi kata ‘child’ dalam Child Selector CSS.

Kalian bisa menggunakan selector ini contohnya untuk memilih tingkat pertama dari daftar elemen di dalam daftar bersarang yang memiliki lebih dari satu tingkatan. Berikut contohnya:

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

Aturan style di dalam selector ul > li diterapkan hanya pada elemen <li> yang merupakan anak langsung dari elemen <ul>, dan tidak berpengaruh pada elemen daftar lainnya.

Adjacent Sibling Selectors

Adjacent selector adalah fitur yang digunakan untuk memilih elemen yang berada tepat setelah elemen yang ditentukan atau berada langsung di bawahnya. Berikut ini adalah contoh penggunaan Adjacent Sibling Selector untuk menyeleksi elemen <p> yang berada langsung setelah elemen <div> dengan warna merah.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
    background-color: red;
}
</style>
</head>
<body>

<div>
  <p>Paragraf 1 yang berada di div.</p>
  <p>Paragraf 2 yang berada di div.</p>
</div>

<p>Paragraf 3 yang tidak berada di div.</p>
<p>Paragraf 4 yang tidak berada di div.</p>

</body>
</html>

General Sibling Selectors

Merupakan fitur yang memiliki konsep yang sama dengan adjacent selector, yang berbeda jika adjacent selector akan memilih 1 elemen saja setelah elemen yang ditentukan, general sibling selector akan memilih seluruh elemen yang berada setelah elemen yang ditentukan, untuk contoh perhatikan skrip dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	div ~ p 
	{
    	background-color: salmon;
	}
</style>
<body>
	<div>
		<p>Paragraf 1</p>
		<p>Paragraf 2</p>
		<p>Paragraf 3</p>
		<span><p>Paragraf 4</p></span>
	</div>
		<p>Paragraf 5</p>
		<p>Paragraf 6</p>
</body>
</html>

Grouping Selectors

Merupakan gabungan beberapa selector dengan deklarasi aturan yang sama. Masing-masing selector dipisahkan dengan tanda koma. Berikut contoh kodenya:

Apa itu CSS selector dan contohnya?

Pada CSS, selector digunakan untuk memilih elemen mana dari HTML yang akan ditargetkan atau dipengaruhi. Seperti contoh, apabila kita ingin mengatur posisi teks atau warna teks, cara memilihnya adalah dengan memakai selector.

Selector CSS apa saja?

Dalam CSS terdapat 5 macam selector dasar yang wajib kita ketahui, yaitu:.

Universal Selector..

Tag Selector..

Id Selector..

Class Selector..

Atribut Selector..

Apa fungsi dari ID Selector CSS?

ID Selector digunakan untuk menyeleksi elemen berdasarkan ID tertentu. Dalam penggunaannya, ID selector diawali dengan tanda pagar (#) atau hash. Contoh di dalam css: #intro {color: blue} .