Scribd
Unggah
790 tayangan21 halaman

Rule CSS

Ringkasan dokumen tersebut adalah: Dokumen tersebut membahas berbagai jenis selector dalam CSS seperti type selector, class selector, ID selector, attribute selector, dan kombinator. Jenis selector tersebut digunakan untuk menentukan elemen mana yang akan ditargetkan oleh rule CSS.

Diunggah oleh

Muhammad Alif Hidayatullah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
790 tayangan21 halaman

Rule CSS

Ringkasan dokumen tersebut adalah: Dokumen tersebut membahas berbagai jenis selector dalam CSS seperti type selector, class selector, ID selector, attribute selector, dan kombinator. Jenis selector tersebut digunakan untuk menentukan elemen mana yang akan ditargetkan oleh rule CSS.

Diunggah oleh

Muhammad Alif Hidayatullah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 21

Berikut catatan yang sudah kita pelajari sejauh ini tentang styling:

Rule : Sebuah aturan styling yang harus diterapkan pada elemen HTML, dalam sebuah rule terdapat
selector dan deklarasi properti styling.

Selector : Sebuah bagian dari rule, yang mengidentifikasi target elemen untuk menetapkan sebuah rule.

Declaration : Sebuah bagian dari rule, yang terdiri dari pasangan properti dan nilainya.

External Style Sheet : Berkas terpisah yang di dalamnya hanya terdapat sebuah rules yang akan
digunakan pada website.

Embedded Style Sheet : Kumpulan rules yang dituliskan dalam berkas HTML dengan menggunakan
elemen <style>.

Inline Style : styling yang diterapkan pada elemen HTML dengan menggunakan atribut style.

Selector Basic

Pada modul sebelumnya kita sudah mengetahui apa itu selector, dan menggunakannya.

Yang kita gunakan tersebut merupakan selector basic. Sebenarnya terdapat beberapa macam dari
selector basic, yakni:

-Type Selector

-Class Selector

-ID Selector

-Attribute Selector

-Universal Selector
Type Selector

Type Selector menggunakan nama elemen sebagai target untuk diterapkannya rule.
Dengan kata lain, ketika menggunakan selector ini tentu rule akan diterapkan pada
seluruh elemen target yang ada pada dokumen HTML. Contohnya sebagai berikut:

1. <!doctype html>
2. <html lang="en">
3. <head>
4.    <title>Judul Dokumen</title>
5.    <style>
6.       /* Semua elemen span */
7.        span {
8.            color: red;
9.        }
10.    </style>
11. </head>
12. <body>
13. <span>Ini merupakan sebuah teks yang berada pada elemen span. Seharusnya elemen
ini ditampilkan dengan warna teks merah.</span>
14. <p>Ini merupakan sebuah teks yang berada pada elemen paragraf, teks ini tidak
seharusnya tidak akan terpengaruh oleh rule.</p>
15. <span>Ini merupakan sebuah teks yang berada pada elemen span lainnya. Seharusnya
elemen ini ditampilkan dengan warna teks merah juga.</span>
16. </body>
17. </html>

Class Selector
Class selector menetapkan target elemen berdasarkan nilai dari atribut class yang
diterapkan pada elemennya. Untuk penulisan selector, awali dengan tanda titik (.)
kemudian lanjutkan dengan nama class-nya. Contoh:

1. <!doctype html>

2. <html lang="en">

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        .red {

7.            color: red;

8.        }

9.  
10.        .skyblue-bg {

11.            background-color: skyblue;

12.        }

13.  

14.        .fancy {

15.            font-weight: bold;

16.            text-shadow: 4px 4px 3px #77f;

17.        }

18.    </style>

19. </head>

20. <body>

21. <p class="red">Paragraf dengan teks berwarna merah</p>

22. <p class="skyblue-bg">Paragraf dengan background berwarna biru langit</p>

23. <p class="fancy">Paragraf dengan gaya fancy</p>

24. <p>Paragraf yang menampilkan teks dengan warna standar tanpa menerapkan
styling</p>

25. </body>

26. </html>

Class bersifat shareable, sehingga dapat diterapkan pada banyak elemen dengan tipe
elemen yang berbeda-beda. Misalkan sebuah class red dapat diterapkan pada elemen
paragraf dan juga heading untuk menampilkan teks berwarna merah.

1. <h1 class="red">Heading dengan teks berwarna merah</h1>

2. <p class="red">Paragraf dengan teks berwarna merah</p>

Tidak hanya itu, sebuah elemen juga mungkin memiliki banyak nilai class, sehingga kita
dapat menerapkan lebih dari satu rule atau gabungan rule pada elemen target. Untuk
menggunakannya, pada atribut class kita cukup tuliskan nama kelasnya dan pisahkan
tiap nilai kelasnya dengan spasi.

1. <h1 class="red skyblue-bg">Heading dengan teks berwarna merah dan background biru
langit</h1>

2. <p class="red fancy">Paragraf dengan teks berwarna merah dan bergaya fancy</p>

Kita juga bisa menargetkan elemen secara spesifik yang memiliki sebuah class.
Bagaimana jika kita ingin menerapkan gaya yang berbeda ketika menggunakan kelas
bergaya keren alias fancy pada sebuah paragraf? untuk melakukannya, pada selector
kita tuliskan nama elemen target diikuti dengan titik (.) kemudian nama kelasnya.
Perhatikan contoh berikut:

1. <!doctype html>

2. <html lang="en">kita

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        .fancy {

7.            font-weight: bold;

8.            text-shadow: 4px 4px 3px #77f;

9.        }

10.  

11.        p.fancy {

12.            text-shadow: 4px 4px 3px #00c8eb;

13.        }

14.    </style>

15. </head>

16. <body>

17. <h1 class="fancy">Heading dengan teks bergaya fancy</h1>

18. <p class="fancy">Paragraf dengan teks bergaya fancy</p>


19. </body>

20. </html>

Jika berkas tersebut dibuka pada browser, maka gaya fancy yang diterapkan pada
elemen heading dan elemen paragraf akan berbeda.

ID Selector

ID selector menetapkan target elemen berdasarkan nilai dari atribut id yang diterapkan


pada elemennya. Sama seperti class, atribut id dapat diterapkan pada seluruh elemen
HTML, dan kebanyakan atribut ini digunakan untuk memberikan sebuah arti pada
generic element seperti <div> dan <span>. Namun atribut id ini tidak bersifat shareable,
yang artinya nilai id ini harus unik dan digunakan pada satu elemen saja.

Untuk menetapkan selector dengan menggunakan id, kita gunakan tanda octothorpe (#)


atau lebih familiar disebut dengan hash. Berikut contohnya:

1. <!doctype html>
2. <html lang="en">
3. <head>
4.    <title>Judul Dokumen</title>
5.    <style>
6.       #special {
7.           background-color: skyblue;
8.       }
9.    </style>
10. </head>
11. <body>
12. <div id="special">
13.    <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
14. </div>
15. <div>
16.    <p>Ini merupakan konten di dalam sebuah div biasa.</p>
17. </div>
18. </body>
19. </html>

Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:

Yang harus kita perhatikan kembali adalah id ini bersifat unik. Jika kita ingin
menerapkan sebuah rule pada banyak elemen, sebaiknya gunakan atribut class, bukan
dengan id.

1. <!doctype html>
2. <html lang="en">
3. <head>
4.    <title>Judul Dokumen</title>
5.    <style>
6.       #special {
7.           background-color: skyblue;
8.       }
9.    </style>
10. </head>
11. <body>
12. <div id="special">
13.    <p>Ini merupakan konten di dalam sebuah div yang diberi id special.</p>
14. </div>
15. <div id="special"> <!-- ini merupakan contoh yang salah dalam penerapan id -->
16.    <p>Ini merupakan konten di dalam sebuah div biasa.</p>
17. </div>
18. </body>
19. </html>
Attribute Selector

Attribute selector merupakan cara menetapkan target elemen berdasarkan sebuah


atribut yang digunakan atau bahkan bisa lebih spesifik dengan nilainya. Contohnya
sebagai berikut:

1. <!doctype html>
2. <html lang="en">
3. <head>
4.    <title>Judul Dokumen</title>
5.    <style>
6.  
7.        /* <a> element yang menerapkan href attribut */
8.        a[href] {
9.            color: blue;
10.        }
11.  
12.        /* <a> element yang menerapkan nilai pada href dengan awalan "#" */
13.        a[href^="#"] {
14.            background-color: gold;
15.        }
16.  
17.        /* <a> element yang menerapkan nilai pada href yang mengandung teks
"example" */
18.        a[href*="example"] {
19.            background-color: silver;
20.        }
21.  
22.        /* <a> element yang menerapkan nilai pada href yang mengandung teks
"insensitive" tidak mementingkan huruf kapital*/
23.        a[href*="insensitive" i] {
24.            color: cyan;
25.        }
26.  
27.        /* <a> element yang menerapkan nilai pada href dengan akhiran ".org" */
28.        a[href$=".org"] {
29.            color: red;
30.        }
31.    </style>
32. </head>
33. <body>
34. <ul>
35.    <ul>
36.        <li><a href="#internal">Internal link</a></li>
37.        <li><a href="http://example.com">Example link</a></li>
38.        <li><a href="#InSensitive">Insensitive internal link</a></li>
39.        <li><a href="http://example.org">Example org link</a></li>
40.    </ul>
41. </ul>
42. </body>
43. </html>

Jika kode di atas dibuka pada browser, maka tampilan akan tampak seperti ini:
Dari kode di atas terlihat banyak sekali kondisi yang dapat diterapkan pada
atribut selector. Agar dapat lebih mudah memahaminya, mari kita rangkum dalam
sebuah tabel.

Syntax Description
[attr] Menargetkan elemen yang menerapkan atribut attr.
[attr=value] Menargetkan elemen yang menerapkan atribut attr dengan nilai value.
[attr~=value] Menargetkan elemen yang menerapkan atribut attr dengan salah satu nilainya adalah value.
[attr^=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya diawali dengan nilai value.
[attr$=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya diakhiri dengan value.
[attr*=value] Menargetkan elemen yang menerapkan atribut attr yang nilainya mengadung value.

Combinators
Kita sudah mengetahui beberapa basic selector yang ada pada CSS. Tidak hanya
sampai disitu, CSS Selector dapat berisi lebih dari satu basic selector. Di antara basic
selector, kita dapat menyertakan sebuah kombinator.

Ada empat kombinator yang dapat kita gunakan yaitu: Adjacent Sibling


Selector, General Sibling Selector, Child Selector, dan Descendant Selector.
Adjacent Sibling Selector (+)

Adjacent Sibling Selector menggabungkan dua buah basic selector dengan


menggunakan tanda + di antara keduanya. Contohnya seperti ini:

1. img + p {

2.    color: green;

3. }

Adjacent Sibling Selector terdiri dari dua buah target elemen, namun hanya elemen
kedua yang menerapkan rule selama elemen tersebut dituliskan langsung setelah
elemen pertama pada berkas HTML. Selain itu kedua elemen tersebut harus berada di
dalam induk elemen yang sama. Pada contoh di atas rule akan diterapkan pada elemen
paragraf yang berada tepat setelah elemen gambar. Berikut contoh penerapannya:

1. <!doctype html>

2. <html lang="en">

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        /* Rule akan diterapkan pada elemen paragraf yang berada tepat setelah
elemen img */

7.        img + p {

8.            color: green;

9.        }

10.    </style>

11. </head>

12. <body>

13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen
paragraf ini.</p>

14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">


15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka
paragraf ini seharusnya menerapkan rule dengan menampilkan teks berwarna
hijau.</p>

16. <p>Ini merupakan paragraf ketiga. Letaknya memang setelah elemen gambar, namun
tidak diletakkan persis setelahnya, sehingga rule tidak akan diterapkan pada
elemen ini.</p>

17. </body>

18. </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti
berikut:
General Sibling Selector (~)

Mirip seperti Adjacent Sibling Selector namun rules akan diterapkan pada seluruh


elemen kedua yang berada setelah elemen pertama. Dengan catatan, induknya sama,
walaupun posisi dari elemen kedua tidak berada tepat setelahnya. General Sibling
Selector menggunakan tanda ~ untuk menetapkan elemenya. Contohnya seperti
berikut:

1. img ~ p {

2.    color: green;

3. }

Rule di atas akan diterapkan pada elemen paragraf yang berada setelah elemen img
selama masih di dalam induk yang sama.

1. <!doctype html>

2. <html lang="en">

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        /* Rule akan diterapkan pada elemen header yang berada tepat setelah elemen
img */

7.        img ~ p {

8.            color: green;

9.        }

10.    </style>

11. </head>

12. <body>

13. <p>Ini merupakan paragraf pertama. Rule styling tidak akan diterapkan pada elemen
paragraf ini.</p>

14. <img src="https://i.imgur.com/cs2BJzw.jpg" alt="Dicoding logo" width="400px">


15. <p>Ini merupakan paragraf kedua dan ditetapkan setelah elemen gambar. Maka
paragraf ini menerapkan rule dengan menampilkan teks berwarna hijau.</p>

16. <div>

17.    <p>Ini merupakan paragraf ketiga, letaknya setelah elemen gambar, namun
paragraf ini dibungkus di dalam div sehingga paragraf ini tidak akan menerapkan
rule styling karena tidak memiliki induk yang sama.</p>

18. </div>

19. <p>Ini merupakan paragraf empat. Letaknya memang setelah elemen gambar dan
memiliki induk yang sama seperti elemen gambar, sehingga elemen ini akan
menerapkan rule dengan menampilkan teks berwarna hijau.</p>

20. </body>

21. </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti
berikut:
Child Selector (>)

Child Selector menggabungkan dua buah basic selector dengan menggunakan


tanda greater than (>) di antara basic selector-nya. Contohnya sebagai berikut:

1. div > p {

2.    background-color: yellow;
3. }

Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang berada di
dalam elemen div secara langsung. Dalam arti lain, elemen paragraf merupakan child
dari elemen div bukan sebuah hanya turunannya. Untuk lebih jelas, perhatikan contoh
penerapannya berikut:

1. <!doctype html>

2. <html lang="en">

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        /* Rule akan diterapkan pada elemen paragraf yang merupakan child dari
elemen div */

7.        div > p {

8.            background-color: yellow;

9.        }

10.    </style>

11. </head>

12. <body>

13. <div>

14.    <p>Paragraf pertama. di dalam div.</p>

15.    <p>Paragraf kedua. di dalam div.</p>

16.    <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen
secara langsung.</p></section>

17.    <p>Paragraf keempat. di dalam div.</p>

18. </div>

19. <p>Paragraf kelima. di luar div.</p>

20. <p>Paragraf keenam. di luar div.</p>

21. </body>
22. </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti
berikut:

Descendant Selector (space)

Descendant Selector mirip seperti child selector namun hierarkinya lebih luas, karena


rule akan diterapkan pada seluruh elemen yang menjadi turunannya walaupun secara
tidak langsung. Basic selector pertama yang dituliskan pada selector ini menjadi
induknya dan basic selector yang kedua merupakan akan menerapkan rule. Selector ini
menggunakan spasi dalam menggabungkan dua basic selector. Contohnya sebagai
berikut:

1. div p {

2.    background-color: yellow;

3. }

Pada contoh di atas rule akan diterapkan pada seluruh elemen paragraf yang
merupakan turunan dari elemen div. Berikut contoh penerapannya:

1. <!doctype html>

2. <html lang="en">

3. <head>
4.    <title>Judul Dokumen</title>

5.    <style>

6.        /* Rule akan diterapkan pada elemen paragraf yang merupakan turunan dari
elemen div */

7.        div p {

8.            background-color: yellow;

9.        }

10.    </style>

11. </head>

12. <body>

13. <div>

14.    <p>Paragraf pertama. di dalam div.</p>

15.    <p>Paragraf kedua. di dalam div.</p>

16.    <section><p>Paragraf ketiga. di dalam div namun bukan sebagai anak elemen
secara langsung.</p></section>

17.    <p>Paragraf keempat. di dalam div.</p>

18. </div>

19. <p>Paragraf kelima. di luar div.</p>

20. <p>Paragraf keenam. di luar div.</p>

21. </body>

22. </html>

Jika berkas di atas dijalankan pada browser, maka akan menghasilkan tampilan seperti
berikut:
Pseudo Selector
Selain beberapa selector yang sudah kita pelajari, CSS masih memiliki dua selector lagi
yang dapat kita manfaatkan untuk membantu untuk menyeleksi elemen untuk
menerapkan sebuah rule, yakni Pseudo-class dan Pseudo-elemen.

Sebelum menjelaskan lebih detail tentang kedua selector tersebut, perlu kita ketahui
pseudo selector berbeda dari selector yang sudah dibahas sebelumnya, selector ini
menargetkan elemen pada bagian yang “tidak terlihat” seperti sifat pada elemen,
sehingga untuk menetapkannya, kita tidak bisa menggunakan selector biasa. Salah
satu contoh yang paling sering kita terapkan adalah :hover, Pseudo Selector tersebut
kita gunakan untuk menetapkan rule ketika cursor diarahkan ke target elemen.

1. a:hover {

2.    color: blue;

3. }

Contoh kode di atas merupakan salah satu pseudo-class selector dimana elemen
anchor akan menerapkan warna biru ketika kursor diarahkan pada elemen tersebut.

Mari kita bahas lebih detail mengenai pseudo-class selector dan pseudo-element
selector.

Pseudo-class Selector

Pseudo-class merupakan sebuah class “semu” yang sebenarnya ada pada tiap elemen
HTML. Pada contoh sebelumnya kita sudah mengetahui salah satu pseudo-class
selector, dengan menggunakan selector ini kita dapat memilih elemen
berdasarkan class yang tidak nampak pada dokumen. Kita bisa menetapkan rule hanya
ketika sebuah tautan telah dikunjungi (:visited) atau ketika sebuah elemen diarahkan
dengan kursor (:hover).

Untuk menggunakan pseudo-class kita gunakan tanda titik dua (:) pada basic
selector kemudian diikuti dengan pseudo-class nya. Berikut contoh penerapan
beberapa pseudo-class pada sebuah elemen anchor:

1. /* rule akan diterapkan pada sebuah tautan yang belum pernah dikunjungi */

2. a:link {

3.    color: red;

4. }

5.  

6. /* rule akan diterapkan pada sebuah tautan yang sudah pernah dikunjungi */

7. a:visited {

8.    color: green;

9. }

10.  

11. /* rule akan diterapkan pada sebuah tautan ketika diarahkan dengan kursor */

12. a:hover {

13.    color: pink;

14. }

15.  

16. /* rule akan diterapkan pada sebuah tautan ketika ditekan */

17. a:active {

18.    color:orange;

19. }

Maka hasilnya akan seperti ini:


Tidak hanya yang dicontohkan di atas, ada banyak sekali class semu yang menjadi
standar pseudo-classes dalam CSS. Kita pun bisa melihat indeks standar yang ada
pada pseudo-class pada tautan resmi Mozilla berikut: https://developer.mozilla.org/en-
US/docs/Web/CSS/Pseudo-classes

Pseudo-elemen Selector

Sama seperti pseudo-class, pseudo-elemen merupakan sebuah elemen “semu” yang


sebenarnya ada tetapi tidak tampak secara tertulis pada berkas HTML. Selector ini
biasa digunakan ketika kita ingin menambahkan sebuah konten tepat sebelum dan
setelah sebuah elemen paragraf. Alhasil kita tidak perlu menuliskan struktur elemen
tersebut pada berkas HTML. Cukup manfaatkan pseudo-
elemen ::before dan ::after kemudian tuliskan konten tersebut cukup pada CSS.
Contohnya kita ingin menambahkan tanda kutip sebelum dan sesudah elemen
blockquote. Seperti ini cara menuliskannya:

1. blockquote::before,

2. blockquote::after {

3.    content: '"';

4.    font-size: 24px;

5.    font-style: italic;

6.    font-weight: bold;

7. }

Dengan menuliskan rule tersebut, elemen <blockquote> memiliki tanda kutip pada awal


dan akhir elemennya.

1. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius
error explicabo ipsum molestiae necessitatibus nesciunt possimus reprehenderit sed
voluptates. Aliquam aspernatur autem est nobis officia praesentium quas recusandae
rem.</blockquote>

Tampilan yang dihasilkan:


Untuk menggunakan pseudo-elemen kita gunakan dua buah tanda titik dua (::)
kemudian diikuti dengan pseudo-elemen nya. Sebenarnya kita bisa menggunakan satu
buah tanda tanda titik dua (:) namun kita perlu membedakannya dengan pseudo-class.
Karena itulah baiknya ketika menggunakan pseudo-elemen, gunakanlah dua buah titik
dua (::).

Pseudo-element tidak hanya ::before dan ::after. Dengan pseudo-elemen kita juga


dapat menentukan rule pada awal karakter konten elemen.

1. <!doctype html>

2. <html lang="en">

3. <head>

4.    <title>Judul Dokumen</title>

5.    <style>

6.        /* Rule styling akan diterapkan pada karakter pertama disebuah paragraf */

7.        p::first-letter {

8.            font-size: 32px;

9.            font-weight: bold;

10.            color: saddlebrown;

11.        }

12.    </style>

13. </head>

14. <body>
15. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto deserunt,
dicta laudantium quae quam sequi

16.    soluta vitae! A, architecto beatae, consequuntur et eveniet fuga laudantium


molestias praesentium temporibus, unde

17.    velit.</p>

18. </body>

19. </html>

Tampilan yang dihasilkan:

Untuk mengetahui lebih lengkap mengenai apa saja pseudo-elemen yang dapat kita
manfaatkan, kita bisa melihat dokumentasi resmi yang diberikan Mozilla pada tautan
berikut: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Anda mungkin juga menyukai