Cara Menggunakan Selector Pada Kode CSS

Setelah mempelajari macam macam selector yang ada pada CSS, kali kita akan mempelajari cara penerapannya karena Selector pada kode CSS ternyata juga bisa saling dikombinasikan satu sama lain sehingga dapat memudahkan kita dalam memilih element html yang hendak dimanipulasi.
Contohnya saja kita dapat menyeleksi element tag html yang ada pada element tag html tertentu, seperti menyeleksi tag <p> yang berada di dalam element tag <div> dan masih banyak lagi.

<html>
<head>
<title>Memahami Penggunaan Selector CSS</title>

<style type="text/css">

</style>
</head>

<body>

<h1 class="title">Belajar CSS</h1>

<p id="p1" class="paragraf">
Saya sedang belajar bahasa pemrograman Web CSS di
<a href="zonainternetku.blogspot.com" target="_blank">Zona Internetku</a>
</p>

<h2 class="title sub_title">Macam macam bahasa pemrograman Web</h2>

<p id="p2" class="paragraf">
Pada dasarnya dalam pembuatan website membutuhkan berbagai macam bahasa pemrograman web untuk menghasilkan tampilan website yang dinamis seperti bahasa pemrograman berikut ini
</p>

<ul>
<li>Belajar HTML</li>
<li>Belajar CSS <span class="actived">Anda di sini !</span></li>
<li>Belajar JavaScript</li>
<li>Belajar PHP</li>
</ul>

</body>
</html>

Cara Menggunakan Selector Pada Kode CSS 1

Dari kode di atas kalian dapat melihat bahwa kode tersebut terdiri dari berbagai macam kode tag html beserta juga atributnya. Kode ini sebelumnya sudah saya jelaskan pada pembahasan sebelumnya di sini Memahami Fungsi Selector, Property Dan Value Pada CSS

Pada tag <head> disitu terdapat tag <style> yang bisa kita gunakan untuk memanipulasi semua element html menggunakan selector yang akan kita pilih

+ Tujuan pertama kita adalah membuat semua ukuran teks menjadi 16 piksel, maka kalian bisa meletakkan kode berikut kedalam tag <style>

* {font-size: 18px}

+ Tujuan kedua membuat semua judul pada tag header menjadi berwarna merah

h1 , h2 {color: #ff000}

karena kita memberikan efek style yang sama maka kita dapat menggabungkannya supaya lebih singkat dan efisien dengan cara menggunakan tanda "," sebagai pemisah selector dan memberikan style yang sama seperti kode di atas

+ Tujuan ketiga mengubah teks pada link menjadi berwarna hijau dan bercetak tebal

a {color: #00ff00;
font-weight: bold;}

kode tersebut akan memanipulasi seluruh kode tag <a> baik yang berada di dalam tag <p> maupun yang ada di luarnya. Namun jika kita hanya ingin memanipulasi kode tag <a> yang hanya ada di dalam element tag <p> maka kita bisa menggunakan penggabungan selector seperti berikut

p a {color: #00ff00;
font-weight: bold;}

+ Tujuan keempat kita akan membuat semua tag header menjadi berbeda satu sama lain

.title {font-size: 24px;
font-style: italic}
.sub_title {font-size: 21px;
text-decoration: underline;}

+ Tujuan kelima yaitu mengubah warna teks yang berada pada tag <span> yang ada di dalam tag <ul> menjadi berwarna biru, dan untuk membuatnya kita harus menggunakan selector seperti berikut

ul li span {color: blue}

namun jika kalian menginginkan yang lebih spesifik lagi maka kalian bisa menggunakan selector seperti berikut, yaitu dengan menambahkan attribute selector yang ada

ul li span.actived {color: blue}

Jika semua selector di atas digabungkan kedalam tag <style> maka hasilnya akan terlihat seperti berikut

* {font-size: 18px}
h1 , h2 {color: #ff0000}
p a {color: #00ff00;
font-weight: bold;}
.title {font-size: 24px;
font-style: italic}
.sub_title {font-size: 21px;
text-decoration: underline;}
ul li span.actived {color: blue}

Cara Menggunakan Selector Pada Kode CSS 2

Semoga setelah kalian mempelajari script di atas kalian bisa memahami cara menggunakan selector pada CSS dengan sempurna, karena penggunaan selector pada CSS ini berpengaruh besar dalam memanipulasi element HTML.

Baca juga :
Mengenal Macam Macam Selector Pada Kode CSS
Memahami Fungsi Selector, Property Dan Value Pada CSS
Memahami Atribut Class Dan Id Pada HTML

Cara Menggunakan Selector Pada Kode CSS

Related Posts

Tags: CSS