SELECTOR CSS

CSS selectors merupakan mekanisme dalam memilih dan menargetkan elemen didalam HTML. selectors memungkinkan berkomunikasi langsung dengan elemen-elemen HTML, memberi tahu browser bagian mana yang harus diberi style khusus.

Selector dasar dipakai untuk menargetkan dan mengubah tampilan elemen HTML, jenis-jenis selector dasar

A. Selector tag

Selector tag menargetkan elemen berdasarkan jenisnya, dengan elemen selector akan memungkinkan semua elemen paragraf di halaman web mengalami perubahan.

<!DOCTYPE HTML>
<html>
   <head>
      <title>www.syaiflash.com - Selector tag</title>
      <style type="text/css">
            h1 {
                text-decoration: underline;
                color: blue;
            }
            p {
                font-style: italic;
                font-size: 25px;
                font-family: "Times New Roman", Times, serif;
                color: red;
            }  
      </style>
   </head>
   <body>
      <h1> JUDUL ARTIKEL</h1>
      <p> Isi Artikel pertama </p>
      <p> Isi Artikel kedua</p>
      <p> Isi Artikel ketiga</p>
   </body>
</html>

B. Class selector

Selector Class menargetkan elemen berdasarkan atribut class. Menggunakan class selector yang diawali dengan tanda titik (.) Sangat cocok apabila ingin beberapa elemen memiliki style sama untuk menciptakan konsistensi dalam desain.

<!DOCTYPE HTML>
<html>
   <head>
      <title>www.syaiflash.com - Selector Class</title>
      <style type="text/css">
      .selector_01 {
            font-style: italic;
            font-size: 25px;
            font-family: "Times New Roman", Times, serif;
            color: red;
                  }  
       .selector_02 {
            font-style: bolt;
            font: 30px monospace;
            color: blue;
                  }  
      </style>
   </head>
   <body>
      <h1> JUDUL ARTIKEL</h1>
      <p class='selector_01'>Tulisan artikel 01</p>
      <p class='selector_02'>Tulisan artikel 02</p>
   </body>
</html>

C. ID selector

ID selector menargetkan elemen berdasarkan atribut ID-nya

<!DOCTYPE HTML>
<html>
   <head>
      <title>www.syaiflash.com - ID selector</title>
      <style type="text/css">
        #judul-utama {
            color: green;
        }
      </style>
   </head>
   <body>
      <h1> CSS DENGAN ID SELECTOR</h1>
      <h1 id="judul-utama">Selamat Datang di Website Kami</h1>
   </body>
</html>

D. Universal selector

universal selector direpresentasikan dengan tanda bintang (*) dan digunakan untuk menargetkan semua elemen yang ada dalam dokumen HTML

<!DOCTYPE html>
<html>
<head>
    <title>www.syaiflash.com - Selector Universal</title>
<style>
    * {
    text-align: center;
    color: blue;
    }
</style>
</head>
<body>
<h1>Selamat Datang</h1>
<h2 id="tes_id">Selamat Datang di Website Kami</h2>
<p>Every element on the page will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>

</body>
</html>

E. Atribut Selector

Menggunakan dan memilih nama sesuai dengan nama atribut pada tag html. Penulisan selector attribute diawali dengan nama tag lalu nama atributte.

<!DOCTYPE html>
<html>
<head>
    <title>www.syaiflash.com - Atribut Selector</title>
<style>
    input[type=text] {
        color: blue;
        padding: 10px;
        border: 1px solid blue;
    }
</style>
</head>
<body>
    <input type="text" placeholder="Masukan nama Anda" />
</body>
</html>

F. Selector Pseudo-class

Selector CSS yang digunakan untuk menargetkan elemen HTML berdasarkan keadaan atau perilaku elemen tersebut. Misalnya, selector pseudo-class dapat digunakan untuk menargetkan elemen saat diklik, saat kursor mouse melayang di atasnya, saat elemen dalam fokus, dan masih banyak lagi

<!DOCTYPE html>
<html>
<head>
    <title>www.syaiflash.com - Selector Pseudo-class</title>
<style>
    p:hover {
        color: yellow;
        background-color: blue;
    }
</style>
</head>
<body>
    <p>Ini adalah paragraf dengan tag p pada kode html</p>
</body>
</html>

Pseudo-class lainnya

Selector	Contoh penulisan	Contoh Deskripsi
:active	a:active	berfungsi untuk memilih link yang telah aktif
:focus	input:focus	memilih elemen input ketika di klik atau focus
:link	a:link	memilih link yang belum di klik / belum dikunjungi
:visited	a:visited	memilih link yang sudah di kilk / sudah dikunjungi
:disabled	input:disabled	memilih elemen input yang tidak aktif / disable
:enabled	input:enabled	memilih elemen input yang aktif / enabled

G. Selector Pseudo-Element

Selector pseudo-element digunakan untuk memilih bagian yang spesifik, seperti baris pertama pada paragraf, daftar pertama pada list, huruf pertama pada teks dan menambahkan teks pada elemen tertentu.

<!DOCTYPE html>
<html>
<head>
    <title>www.syaiflash.com - Pseudo-Element</title>
<style>
    p::after {
    content: " - Teks baru dengan pseudo after";
    }
</style>
</head>
<body>
    <p>Ini adalah paragraf dengan tag p pada kode html</p>
</body>
</html>

Pseudo-element lainnya

Selector	Contoh penulisan	Contoh Deskripsi
::after	p::after	menambah konten setelah dan seluruh tag p
::before	p::before	menambah konten sebelum dan seluruh tag p
::first-line	p::first-line	memilih baris pertama dalam tag p
::first-letter	p::first-letter	memilih huruf pertama dalam tag p

H. Selector Group

Selector group memungkinkan untuk menggunakan lebih dari satu element tertentu dan menggunakan style css yang sama. Untuk penulisan kodenya dipisahkan dengan koma.

<!DOCTYPE html>
<html>
<head>
    <title>www.syaiflash.com - Selector Group</title>
<style>
    h2, h3, p {
        font-size: 28px;
    }
</style>
</head>
<body>
    <h2>Belajar CSS selector dengan tag h2</h2>
    <h3>Belajar CSS selector dengan tag h3</h3>
    <p>Ini adalah paragraf dengan tag p pada kode html</p>
</body>
</html>