Cara menggunakan target attribute in css

Setelah memahami struktur dasar CSS dan cara menulis CSS di HTML, berikutnya kita akan pelajari lebih dalam tentang selektor.

Hal dasar yang harus kita ketahui setelah memahami cara menulis HTML di CSS adalah selektor.

Selektor adalah katakunci dan simbol yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML.

Ada 6 macam selektor di CSS:

1. Selektor Tag
2. Selektor Class
3. Selektor ID
4. Selektor Atribut
5. Selektor Universal
6. Selektor Pseudo

1. Selektor Tag

Selektor Tag disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan nama tag.

Contoh:

p {
    color: blue;
}

Artinya: Pilih semua elemen

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Kalau misalnya kita punya struktur HTML seperti ini:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka akan menghasilkan output seperti ini:

Semua elemen

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

2. Selektor Class

Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Selektor class dibuat dengan tanda titik di depannya.

Contoh:

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Kita memiliki selektor class beranam

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Contoh:

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

Hasilnya:

Selektor class dapat kita gunakan pada elemen yang kita inginkan.

Sebuah elemen HTML dapat menggunakan satu atau lebih class.

Contoh:

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

Lalu di HTML kita gunakan kedua class tersebut pada satu elemen:

<h2 class="text-white bg-teal">Tutorial CSS untuk Pemula</h2>

Hasilnya:

3. Selektor ID

Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh satu elemen saja.

Selektor ID ditandai dengan tanda pagar (

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Contoh:

#header {
    background: teal;
    color: white;
    height: 100px;
    padding: 50px;
}

Lalu pada kode HTML:

<header id="header">
    <h1>Selamat Datang di Website Saya</h1>
</header>

Hasilnya:

4. Selektor Atribut

Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini hampir sama seperti selektor Tag.

Contoh selektor Atribut:

input[type=text] {
    background: none;
    color: cyan;
    padding: 10px;
    border: 1px solid cyan;
}

Artinya kita akan memilih semua elemen

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Contoh kode HTML:

<input type="text" placeholder="ketik sesuatu..." />

Hasilnya:

5. Selektor Universal

Selektor universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada jangkaua (scope) tertentu.

Contoh:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Artinya semua elemen akan memiliki garis

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

.pink {
  color: white;
  background: pink;
  padding: 5px;
}

Hasilnya:

Selektor universal bisanya digunakan untuk me-reset CSS.

Kenapa harus di-reset?

Pada halaman HTML, ada beberapa CSS bawaan browser seperti

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

Reset bertujuan untuk menghilangkan

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

Contoh CSS reset:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka semua elemen tidak akan memiliki

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

6. Pseudo Selektor

Pseudo selektor adalah selektor untuk memilih elemen semu seperti state pada elemen, elemen before dan after, elemen ganjil, dan sebagainya.

Ada dua macam pseudo selektor:

1. pseudo-class selektor untuk state elemen;
2. pseudo-element selektor untuk elemen semu di HTML.

Mari kita bahas satu per satu..

1. Pseudo-class

Pseudo-class adalah selektor untuk memilih state pada elemen.

Contohnya seperti elemen saat diklik, saat fokus, saat disentuh, dan lain sebagainya.

Nah, dengan selektor ini kita bisa menentukan tampilan dari elemen pada state tersebut.

Format penulisan pseduo-class menggunakan titik dua setelah elemen.

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Contoh:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Artinya:

Kita akan memberikan warna hijau pada elemen

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

Maka hasilnya:

Selain

<p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

• <p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

  8 untuk memlih link yang belum dikunjungi;

• <p>Saya sedang belajar <b class="pink">CSS</b> di petanikode.com.</p>

  9 untuk memlih link yang sudah dikunjungi;

• .text-white {
      color: white;
  }
  
  .bg-teal {
      background: teal;
  }

  0 untuk memilih elemen yang sedang aktif, seperti saat diklik;

• .text-white {
      color: white;
  }
  
  .bg-teal {
      background: teal;
  }

  1 untuk memlih elemen yang sedang dalam keadaan fokus, misal teks lagi diinput.

• .text-white {
      color: white;
  }
  
  .bg-teal {
      background: teal;
  }

  2 untuk memilih elemen yang dicentang pada checkbox.

Masih banyak lagi, list lengkapnya bisa kamu cek di MDN Doc.

2. Pseudo-element

Pseudo-element adalah selektor untuk memilih elemen semu. Elemen semu yang saya maksud di sini adalah elemen yang seolah-olah kita tambahkan di HTML.

Hmm.. bingung ya 🤔.

Oke kalau begitu kita pakai contoh.

Misalnya kita punya elemen paragraf seperti ini:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Lalu kita ingin memberikan style hanya pada baris pertama saja.

Gimana caranya?

Tanpa pseudo-element, kita bisa tambahkan elemen

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Kemudian memilih elemen span tersebut di CSS seperti ini:

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Cara ini sebenarnya tidak disarankan, karena kita harus membuat elemen baru di dalam paragraf. Belum lagi, jika paragrafnya cukup panjang baris pertama akan tambah panjang pula.

Maka di sinilah kita bisa pakai selektor pseudo-element

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

Sehingga tanpa menambahkan elemen

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

<div>Helo apa kabar, saya sedang belajar CSS</div>
<p>Materi yang sedang kita bahas adalah Selektor</p>
<div>Saat ini sedang dibahas tentang selektor tag</div>
<p>Selektor tag adalah selektor untuk memilih elemen HTML berdasarkan nama tagnya</p>

Maka hasilnya:

Bedanya dengan pseudo-class apa?

Selektor pseudo-element menggunakan tanda titik dua ganda (

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}

.text-white {
    color: white;
}

.bg-teal {
    background: teal;
}