Belajar CSS ( 3. Selector )

Posted on

Selector Pada CSS

Kali ini kita akan belajar css selector. Selector adalah bagian yang memungkinkan kita untuk memillih dan memanipulasi dari elemen suatu HTML. Selector dapat digunakan untuk mencari dan memilih elemen dari suatu HTML berdasarkan id dan class.

contoh:


<!DOCTYPE html>
<html>
<head>
<style>
     p {
       text-align: center;
       color: blue;
     } 
</style>
</head>
<body>
    <p>setiap paragraf telah kita manipulasi menjadi rata tengah dan berwarna biru</p>
    <p>Iya kan</p>
    <p>Semangat belajar</p>
</body>
</html>

hasil

Id Selector

Pemilihan id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Id harus unik dalam sebuah halaman, sehingga pemilihan id digunakan jika kita ingin memilih satu, elemen yang unik. Untuk memilih elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen. Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = “belajar” contoh:


<!DOCTYPE html>
<html>
<head>
<style>
    #belajar {
       text-align: center;
       color: red;
    }
</style>
</head>
<body>
<p id="belajar">Hello World!</p>
<p>paragraf ini tidak tidak kena efek dari selector</p>
</body>
</html>

hasil

Kelas Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus. Untuk memilih elemen dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas: Dalam contoh di bawah, semua elemen HTML dengan class = “center” akan pusat-blok:


<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

hasil

Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.


<!DOCTYPE html>
<html>
<head>
<style>
p.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>
<p>ini juga tidak terkena efek css</p>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab