Selektor pada css dan html

Untuk posting kali ini saya akan coba membahas sedikit pengselektoran pada kode css untuk memudahkan kita membuat pola css atau elemen tertentu. dan saya postingkan karena saya juga ingin mempelajari selektor pada css ini, mungkin dengan menulis dan membaca sesuatu akan ada sedikit yang saya dapatkan.
Aturan penulisan dasar selektor/tag html, pseudo element, property dan value

slector_atau_taghtml:pseudo_element{property:value;}
Keterangan:
  • diawali dengan selector atau tag html
  • kemudian : (titik dua)
  • nilai pseudo element
  • deklarasi { property:value}

Contoh:  
h1 { font-family: sans-serif }
dengan Pseudo element
h1:first-letter{ font-family: sans-serif }

Contoh penulisan selektor pada HTML:
<html>
<head>
<title>css selektor</title>
<style type="text/css">
p:first-letter{color:blue;/*style untuk huruf awal berwarna biru*/}
p:first-line{color:red;/*style untuk baris pertama berwarna merah*/}
</style>
</head>
<body>

<p>hello world<br/> css</p>

</body>
</html>

1. Grouping
digunakan jika kita mempunyai deklarasi yang sama pada beberapa selektor, dan kita dapat mengelompokannya dengan memakai koma (,).
contoh:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
dibuat menjadi pengelompokan seperti ini:
h1, h2, h3 { font-family: sans-serif }

2. Penulisan class selektor dan id selektor pada html
Contoh penulisan pada HTML :
<html>
<head>
<title>css selektor</title>
<style type="text/css">
.contoh_myclass { color: red} /* semua elements dengan class= "contoh_myclass"*/
#contoh_myid { color: blue} /* semua elements dengan id= "contoh_myid"*/
</style>
</head>
<body>

<div class="contoh_myclass">hello world this is My Class</div>
<br/>
<div id="contoh_myid">hello world this is my ID</div>

</body>
</html> 

Keterangan: 
  • dan untuk perbedaan dari class dengan id  Pada dasarnya yang membedakan antara ID dan CLASS di CSS adalah jumlah penggunaanya. ID digunakan satu kali, sementara CLASS digunakan berkali-kali. Di dalam kode css, ID menggunakan tanda pagar (#) sementara CLASS menggunakan tanda titik (.)

3. Penambahan id atau class pada Tag html
penggunaan id dan class ini bisa dipasangkan contohnya pada penggunaan span, p, h1, dll.
Contoh:
<html>
<head>
<title>css selektor</title>
<style type="text/css">
.contoh_myclass { color: red} /* semua elements dengan class= "contoh_myclass"*/
#contoh_myid { color: blue} /* semua elements dengan id= "contoh_myid"*/
</style>
</head>
<body>
<h1 class="contoh_myclass">hello world this is My Class</h1>

<p class="contoh_myclass">hello world this is My Class</p>

<span id="contoh_myid">hello world this is My ID</span>
</body>
</html>

masih banyak penggunaan selektor lainnya namun saya postingkan sebagian, Kritik dan saran nya saya tunggu jika ada kekurangan dalam artikel ini.
referensi: www.w3.org VIDEO HOT
Label: