The My Project

Beranda
CSS

CSS | BAB 2 Selektor CSS

 


Selektor elemen

Selektor ini digunakan untuk memilih elemen HTML berdasarkan jenis elemen itu sendiri. Misalnya, jika Anda menggunakan selektor "p", itu akan memilih semua elemen dalam dokumen HTML. 

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

<p>belajar coding by ripal.</p>
<p id="para1">noding skuy</p>
<p>semangat</p>

</body>
</html>

Selektor class

Selektor ini digunakan untuk memilih elemen HTML berdasarkan kelas yang ditetapkan untuk elemen tersebut. Untuk menggunakan selektor class, tanda titik (.) ditempatkan sebelum nama kelas yang ingin dipilih. 

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

<h1 class="jonshon">seni memperbaiki bug</h1>
<p class="ambyar">ngoding itu susah biar aku aja.</p> 

<!-- ini tag biasa saja -->
<p>ngoding itu susah biar aku aja.</p> 

</body>
</html>

<!--untuk nama class bisa disesuaikan dengan keinginan anda -->
Selektor id

Selektor ini digunakan untuk memilih elemen HTML berdasarkan id yang ditetapkan untuk elemen tersebut. Tanda pagar (#) ditempatkan sebelum nama ID yang ingin dipilih. 

<!DOCTYPE html>
<html>
<head>
<style>
#paragraf {
  text-align: right;
  color: brown;
  font-size: 50px;
}
</style>
</head>
<body>

<p id="paragraf">ngoding tak kenal waktu !!!!!!!</p>
<p>mengsabbb bro.</p>

</body>
</html>
selector universal

universal selector direpresentasikan dengan tanda bintang (*) dan digunakan untuk menargetkan semua elemen yang ada dalam dokumen HTML. Universal selector adalah jenis selector yang paling umum digunakan, karena dapat digunakan untuk menerapkan gaya pada semua elemen dalam dokumen. 

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: justify;
  color: orange;
}
</style>
</head>
<body>

<h1> ngoding gaada yang instan, Bangggg</h1>
<h2> ngoding gaada yang instan, Bangggg</h2>

<p class="para1">makin kesini</p>
<p id="para2">makin kesana</p>
<p>And me!</p>

</body>
</html>

<!-- universal selector biasanya digunaan untuk mengatur diawaalan -->
<!-- padding, margin, font-family, box sizing DLL -->
Selektor grouping

Selektor grouping adalah salah satu jenis selektor CSS yang digunakan untuk menargetkan beberapa elemen sekaligus. Selektor grouping dapat digunakan untuk memberikan style yang sama kepada beberapa elemen HTML sekaligus. 

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

<h1>Hello World!</h1>
<h2> sudahkah hari ini anda bersyukur</h2>
<p> mr. lorem insum</p>

</body>
</html>
Selektor kombinasi

Kombinator adalah sesuatu yang menjelaskan hubungan antar penyeleksi.

  1. Descendant Selector ( spasi )

    <!DOCTYPE html>
<html>
  <head>
    <style>
      div p {
        color: blue;
        font-family: "Times New Roman", Times, serif;
      }
    </style>
  </head>
  <body>
    <h2>Descendant Selector</h2>

    <p>
      Pemilih turunan mencocokkan semua elemen yang merupakan turunan dari
      elemen tertentu.
    </p>

    <p>Paragraph 1. tidak didalam div.</p>
    <div>
      <p>Paragraph 2 didalam div.</p>
      <p>Paragraph 3 didalam div.</p>
    </div>

    <p>Paragraph 5. tidak didalam div.</p>
    <p>Paragraph 4. tidak didalam div.</p>
  </body>
</html>

  2. child selector (>)

    <!DOCTYPE html>
<html>
  <head>
    <style>
      div > p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h2>Child Selector</h2>

    <p>
      Pemilih anak (>) memilih semua elemen yang merupakan anak dari elemen
      tertentu..
    </p>

    <div>
      <p>Paragraph 1 didalam div.</p>
      <p>Paragraph 2 didalam div.</p>
      <section>
        <!-- not Child but Descendant -->
        <p>Paragraph 3 didalam div (di dalam elemen bagian). .</p>
      </section>
      <p>Paragraph 4 didalam div.</p>
    </div>

    <p>Paragraph 5. bukan didalam div.</p>
    <p>Paragraph 6. bukan didalam div.</p>
  </body>
</html>

  3. Adjacent Sibling Selector (+)

      <!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>Pemilih + digunakan untuk memilih elemen yang berada tepat setelah elemen tertentu lainnya.

.</p>
<p>Contoh berikut memilih elemen p pertama yang ditempatkan tepat setelah elemen div:</p>

<div>
  <p>Paragraph 1 didalam div.</p>
  <p>Paragraph 2 didalam div.</p>
</div>

<p>Paragraph 3. setelah div.</p>
<p>Paragraph 4. setelah div.</p>

<div>
  <p>Paragraph 5 didalam div.</p>
  <p>Paragraph 6 didalam div.</p>
</div>

<p>Paragraph 7. setelah div.</p>
<p>Paragraph 8. setelah div.</p>

</body>
</html>

  4. General Sibling Selector (~)

    <!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p> Pemilih saudara kandung (~) memilih semua elemen yang merupakan saudara berikutnya dari elemen tertentu.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>