Selector CSS

  1. › 
  2. Selector CSS

Selector (Penyeleksi Elemen HTML)

Selector = Penyeleksi Elemen HTML

Selector atau penyeksi elemen HTML ini adalah unsur penting dalam CSS. Karena didalam suatu dokumen (halaman web) terdapat banyak susunan elemen dengan berbagai jenis dan jumlah.

Selain itu, ditambah lagi posisi elemen yang berada didalam elemen lain.

<html>
<head>
<meta/>
<link/>
<script/>
<body>
<main>
<section>
<article>
<p><span><span</p>
<p><a><img/><a</p>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
<aside>
<footer>
Berdasarkan susunan elemen dalam dokumen / halaman web itulah alasan kuat dibutuhkannya penyeleksi elemen. Agar dapat menentukan dengan pasti elemen mana dari sekian banyak elemen tersebut yang akan diberikan style dalam CSS.

Jenis penyeleksi elemen

1. Penyeleksi elemen langsung (tunggal)

Jenis selector ini menyeleksi elemen secara langsung dengan menyebutkan nama tag atau atributnya. Meskipun elemen yang diseleksi berada didalam elemen lain.
SelectorcontohFungsi
tagnama tagtag { }Menyeleksi elemen berdasarkan nama tag.
.class.class { }Menyeleksi elemen berdasarkan class.
#id#id{ }Menyeleksi elemen berdasarkan id.
CATATAN :
Selector berdasarkan class harus diawali dengan tanda titik (.).
Selector berdasarkan id harus diawali dengan tanda tagar (#).

2. Penyeleksi elemen grup

Selector grup : menyeleksi elemen dengan cara menyebutkan beberapa selektor elemen sekaligus sebagai selektornya.
CATATAN : Setiap penyebutan elemen dipisahkan dengan koma (,).
SelectorcontohFungsi
tag,
class,
id		selector,selector,...dst { }Menyeleksi semua elemen tersebut.
*asterik*{ }Menyeleksi seluruh elemen tanpa kecuali.

2. Penyeleksi elemen yang berada didalam elemen lain

<elemen induk>
<elemen target>
Pada selector ini penyebutan elemen target harus didahului oleh selektor elemen induknya. Jika elemen induk tidak disebutkan terlebih dahulu maka akan berdampak pada elemen lain yang selektornya sama.
CATATAN : Penyebutan elemen induk dan elemen target dipisahkan dengan spasi.
SelectorcontohFungsi
tag,
class,
id		selector selector{ }Menyeleksi elemen target yang berada didalam elemen lain.

3. Penyeleksi setiap elemen pertama yang berada didalam elemen lain

<elemen>
<elemen>
<elemen1>
<elemen2>
<elemen3>
<elemen>
<elemen1>
<elemen2>
<elemen3>
<elemen>
<elemen1>
<elemen2>
<elemen3>
Pada selector ini penyebutan elemen target harus didahului oleh selektor elemen induknya.
CATATAN : Penyebutan elemen induk dan elemen target dipisahkan dengan tanda plus (+).
SelectorcontohFungsi
tag,
class,
id		selector + selector{ }Menyeleksi HANYA elemen pertama yang berada didalam elemen lain.
<div class='elemen-induk'>
 <span>span</span>
 <p>paragraf 1 <span>span</span></p>
 <p>paragraf 2 <span>span</span></p>
 <span>span</span>
</div>

<style>
span {color : red;}
</style>

Ujicoba

Komentar

Posting Komentar