Selector pada CSS

belajar css selector

Digunakan pada css untuk mengenali sebuah elemen html yang akan diberi style

Selectors antara lain

  • Elemen HTML
  • Id
  • Class
  • Complex selector

Perbedaan antara selector id dan selector class

Untuk selector id aturannya adalah

  • Sebuah elemen HTML hanya boleh memiliki satu id
  • Setiap halaman hanya boleh memiliki satu elemen dengan id tersebut
  • Dapat digunakan sebagai penanda halaman untuk link
  • Dapat digunakan untuk javascript

Berikut adalah contoh source code mengenai selector yang digunakan pada elemen HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Selector</title>
<style>
body{ /* selector body: memberi font semua content dalam body */
font-family: arial;
}
h1,h2{ /*selector heading h1 dan h2 berwarna hijau */
color:green;
}
ul li a{ /* selector a: link atau tag a berwarna orange */
color:orange;
}
ol li a{
color:red;
}
#p1{ /*selector dengan id #p1 berwarna orange*/
color:orange;
}
.p2{ /*selector class .p2 akan berwarna merah* /
color:blue;
}
.cetak-tebal{
font-weight: bold;
}
.p2.cetak-tebal{
font-size:20px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
<ol>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ol>
<a class="cetak-tebal" href="#">Web InfoKomunikasi</a>
<h2>Judul Artikel</h2>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam sunt nostrum voluptatem velit eum sapiente laudantium, enim veniam vel numquam beatae repellendus. Laudantium fugiat distinctio modi, cupiditate necessitatibus asperiores corporis.</p>
<p class="p2 cetak-tebal">Voluptatibus minima cum, eligendi provident laudantium unde vero enim vitae est, error porro debitis quidem a! Officiis!</p>
</body>
</html>

 

Demikian pembahasan mengenai selector pada css, untuk lebih mendalami mengenai font pada css sebaiknya baca artikel disini, atau ingin lebih kompleks lagi silahkan pelajari mengenai text pada css silahkan klik disini

Postingan tentang CSS

Memahami Pseudo Class pad CSS

Kupas Tuntas List di HTML

Selector pada CSS

Property Background CSS

Text Styling CSS

Font Styling CSS

Please follow and like us:
error

Related posts

Leave a Comment