DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial belajar css # Cara penulisan selector

advertisement
Cara membuat selector css

Salah satu hal penting ketika ingin belajar bahasa pemrograman css adalah belajar cara menulis selector.
Selector inilah yang akan kita gunakan untuk menentukan target elemen html yang ingin kita atur stylenya.
Selector digunakan ketika kita ingin membuat eksternal css ataupun internal css.
Yuk kita mulai tutorialnya

Apa Itu Selector?

Selector bisa juga disebut keyword, yaitu sebuah kata kunci yang digunkan untuk menentukan target elemen yang ingin kita atur stylenya.
Contoh selector css

Macam-Macam Selector

Selector terbagi menjadi beberapa macam, yaitu,
  • Selector Tag, menentukan elemen target berdasarkan tag yang digunakan
    p{color:red;}
  • Selector Id, menentukan elemen target berdasarkan atribut id
    #header{background-color:blue;}
  • Selector Class, menentukan elemen target berdasarkan atribut class
    .post-article{margin:9px 9px 9px 9px;}
  • Selector  Atribut, menentukan elemen target berdasarkan atribut lain
    [href]{color:#fff;}
  • Selector All, mengatur semua element html dengan menggunakan tanda " *".
    *{font-size:14px;}
  • Selector State, mengatur elemen berdasarkan state tertentu
    :active{color:red;}
  • Selector Rule, mengatur style konfigurasi pada element
    ::selection{color:red;}

Cara Penulisan Selector

Menyeleksi beberapa elemen

Kodenya,
target_elemen1, target_elemen2, target_eleme3, target_elemen4 {color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         p, span, pre, b {color:red;}
      </style>
   </head>
   <body>
      <p> Ini Elemen P</p>
      <span>Ini Elemen Span</span>
      <pre> Ini Elemen Pre</pre>
      <code>Ini elemen Code</code>
   </body>
</html>
Hasilnya,
Cara penulisan selector Css

Menyeleksi secara spesifik berdasarkan elemen parent

Kodenya,
elemen_parent1_to_n target_elemen {color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         #post p b {color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elemen Span
            <b>Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi secara spesifik berdasarkan id,class dan atribut

Kodenya,
target_eleme#id.class1.class2.class3 {color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         b#id1.cls1.cls2.cls3{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elemen Span
            <b id="id1" class="cls1 cls2 cls3">Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi child elemen 1 level dari elemen parent

Kodenya,
elemen_1>element_target{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         #post>p{color:red;}
         span{color:black}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elemen Span
            <b>Ini elemen B</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi 1 elemen tertentu dibawah elemen yang lain

Contohnya,
element1+elemen_target{color:red;}
Hasilnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         p + span {color:red;}
      </style>
   </head>
   <body>
      <p> Ini Elemen P</p>
      <span>Ini Elemen Span1</span>
      <span> Ini Elemen Span2</span>
      <span>Ini elemen Span3</span>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi semua elemen tertentu dibawah elemen yang lain

Kodenya,
elemen1 ~ elemen_target{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         p ~ span {color:red;}
      </style>
   </head>
   <body>
      <p> Ini Elemen P</p>
      <span>Ini Elemen Span1</span>
      <span> Ini Elemen Span2</span>
      <span>Ini elemen Span3</span>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi elemen berdasarkan isi atribut

Kodenya,
[atribut=value]{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         [title=ini]{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <b title="ini">Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi elemen jika isi atribut berisi teks tertentu

Kodenya,
[atribut*=value]{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         [title*=ini]{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <b title="ini title target">Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi elemen yang aktif

Kodenya,
element:active{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         a:active{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <a href="#">Ini Target Elemen</a>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi elemen yang di sorot mouse (mouse over)

Kodenya
elemen:hover{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         b:hover{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <b>Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Membuat selector css

Menyeleksi elemen yang di fokuskan (focus)

Kodenya,
target_elemen:focus{color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         input:focus{color:red;}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <input type="text" />
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Membuat selector css

Menambahkan sesuatu setelah elemen target

Kodenya,
target_elemen::after{content:'<<';}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         b::after{content:'<<';color:red}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <b>Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menambahkan sesuatu sebelum elemen target

Kodenya,
terget_elemen::before{content:'>>';}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
         b::before{content:'>>';color:red}
      </style>
   </head>
   <body>
      <div id="post">
         <p>
            Ini elemen p
            <span>
            Ini Elelen Span
            <b>Ini Target Elemen</b>
            </span>
         </p>
      </div>
   </body>
</html>
Hasilnya,
Cara penulisan selector css

Menyeleksi elemen selain elemen tertentu

Kodenya
:not(target_elemen){color:red;}
Contohnya,
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Deretcode.com</title>
      <style>
	*{color:red;}
	:not(code){color:blue;}
      </style>
   </head>
   <body>
      <p> Ini Elemen P</p>
      <span>Ini Elemen Span</span>
      <pre> Ini Elemen Pre</pre>
      <code>Ini elemen Code</code>
   </body>
</html>
Hasilnya,
Cara penulisan selector cssItu tadi beberapa trik penulisan selector, sebenarnya masih banyak trik lainnya, tapi yang barusan kita pelajari adalah trik selector yang umum dilakukan.
Jika kamu merasa artikel ini bermanfaat silahkan klik tombol share. Jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.
Good luck !👍

advertisement



0 Komentar untuk " Tutorial belajar css # Cara penulisan selector"

Silahkan berkomentar dengan baik dan bijak!