CSS Selector atau Penyeleksian CSS

CSS Selector

Pada Tutorial kali ini saya akan membahas mengenai CSS selector atau penyeleksian pada CSS, Penyeleksian CSS akan memungkinkan sobat untuk memilih dan juga memanipulasi elemen HTML. Penyeleksian CSS digunakan untuk menentukan ataupun memilih sebuah elemen berdasarkan pada (id, class, type, dan nilai atribut) dan masih banyak lagi lainnya. Pasti sobat bingung kan?? baiklah mari kita ke dokter contoh.

Penyeleksian CSS Berdasarkan Elemen

Sobat bisa memilih seluruh pada elemen yang akan menjadi sebuah halaman seperti ini:
(semua elemen akan menjadi pusat blok yang nantinya akan diberi warna biru pada tulisan teksnya) contoh:

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

<p>DiSetiap paragraph akan dipengaruhi oleh style</p>
<p id = "contoh1"> yang ini juga!</p>
<p>dan juga yang ini!</p>

</body>
</html>

Hasil diatas:

DiSetiap paragraph akan dipengaruhi oleh style

yang ini juga!

dan juga yang ini!

silahkan sobat coba sendiri.

Penyeleksian CSS Berdasarkan Id

Menyeleksi id dengan menggunakan atribut id dari sebuah tag HTML untuk menentukan elemen tertentu, id harus dibuat unik dalam suatu halaman artinya atribut id yang kita tentukan harus berbeda dengan atribut id yang lainnya karena kita akan menyeleksi satu atribut id yang akan dirubah itulah tujuan dari penyeleksian id.
Untuk menentukan seleksi pada elemen dengan id tertentu sobat harus menuliskan karakter hash "#" lalu ikuti oleh nama id dari sebuah elemen tersebut. Sobat jadi bingung? baiklah dokter contoh akan segera datang...

<!DOCTYPE html>
<html>
<head>
<style>
#contoh1{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<p id = "contoh1">hai sobat :)</p>
<p>Paragraph ini tidak dipengaruhi oleh style.</p>

</body>
</html>

Hasil diatas:

hai sobat :)

Paragraph ini tidak dipengaruhi oleh style.

Ingat: Nama id tidak boleh diawali dengan nomor!
silahkan sobat coba sendiri.

Penyeleksian CSS Berdasarkan Class

Penyeleksian class adalah bertujuan untuk menetukan elemen-elemen dengan class yang khusus, untuk penyeleksian class menggunakan atribut class HTML. Agar dapat menemukan elemen-elemen dengan class tertentu sobat perlu menuliskan karakter periode atau tanda titik "." lalu diikuti dengan nama class tersebut.
sobat bingung lagi? tenang dokter contoh akan dihadirkan kembali :)

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

<h1 class = "center">Merah dan pusat-blok pada heading</h1>
<p class = "center">Merah dan pusat-blok pada paragraph</p>.

</body>
</html>

Hasil diatas:

Merah dan pusat-blok pada heading

Merah dan pusat-blok pada paragraph
.

Sobat juga dapat menetukan bahwa hanya elemen HTML tertentu sajalah yang harus dipengaruhi oleh suatu class.

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

<h1 class = "center">Bagian ini tidak akan dipengaruhi</ h1>
<p class = "center">Paragraph ini yang akan biru dan pusat-blok.</p>

</body>
</html>

Hasil diatas:

Bagian ini tidak akan dipengaruhi

Paragraph ini yang akan biru dan pusat-blok

Ingat: Nama class tidak boleh diawali dengan nomor!
silahkan sobat coba sendiri.

Penyeleksian CSS Berdasarkan kelompok (Grouping)

Dalam CSS seringkali terdapat elemen dengan style yang serupa.
seperti dokter contoh berikut ini:

h1 {
text-align: center;
color: blue;
}

h2 {
text-align: center;
color: blue;
}

p {
text-align: center;
color: blue;
}

Itu hanya baru 3 elemen saja yang kita tuliskan bagaimana lebih banyak dari pada itu? tentu akan memakan banyak waktu dalam menuliskan kode tersebut, solusi dalam permasalahan tersebut kita gunakanlah Penyeleksian secara kelompok untuk meminimalkan kode tersebut. Dalam menentukan penyeksian pada kelompok sobat harus memisahkan masing-masing elemen yang dipilih tersebut dengan tanda koma "," berikut dokter contohnya:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p{
text-align: center;
color: blue;
}
</style>
</ ead>
<body>

<h1> hai sobat :)</h1>
<h2>heading ukuran kecil!</h2>
<p>Dan ini paragraph nya.</p>

</body>
</html>

Hasil diatas:

hai sobat :)

heading ukuran kecil!
Dan ini paragraph nya.

silahkan sobat coba sendiri.

Gimana nih sobat sudah mengerti bukan tentang cara penyeleksian pada CSS? mudah-mudahan tutorial ini dapat dimengerti oleh sobat dan bermanfaat tentunya. Kalo gitu sekian untuk tutorial CSS selector atau penyeleksian CSS, kita akan lanjutkan kembali tutorial CSS di tutorial berikutnya :)

BAGIKAN HALAMAN INI DI :

CSS Selector atau Penyeleksian CSS