Mengenal Pseudo Elemen dan Variable CSS

Mengenal Pseudo Elemen dan Variable CSS - Pseudo elemen didalam CSS merupakan suatu fungsi untuk menambahkan style pada selector baik itu pada tag, id ataupun class yang dipilih. Ada banyak pseudo elemen didalam CSS yang bisa kita gunakan dan tentunya masing - masing pseudo mempunyai peran yang berbeda. Selain pseudo elemen ada pula penggunaan variabel yang bisa kita gunakan didalam CSS, seperti kita ketahui bahwa variabel digunkaan untuk menampung suatu nilai sementara untuk bisa kita gunakan berualng kali. Nah, berikut ini kita akan Mengenal Pseudo Elemen dan Variable CSS lebih lanjut beserta cara penggunaan nya.

1. only-child

Only-child merupakan pseudo elemen yang berguna untuk memilih elemen yang hanya satu - satunya child yang terdapat didalam parent, contoh penggunaan only-child sebagai berikut.

/*Code CSS # ==*/
div p:only-child {
    color: tomato;
    font-weight: bold;
}

<!-- Hanya satu elemen child didalam parent -->
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- Beberapa elemen child didalam parent  -->
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

2. first-letter

First-letter adalah pseudo elemen yang bisa kita gunakan untuk menyeleksi huruf pertama dari sebuah kalimat atau paragraf, contoh penggunaan first-letter sebagai berikut.

/* Code CSS */
.content p:first-letter {
    display: block;
    float: left;
    color:  #00a8ff;
    font-size: 85px;
    font-weight: bold;
    margin-right: 5px;
}

<div class="content">
    <p>Dumet School Tempat Kursus Website, Digital Marketing & Desain Grafis.</p>
</div>

3. first-line

First-line adalah pseudo elemen yang bisa kita gunakan untuk menyeleksi baris pertama pada sebuah elemen atau paragraf, contoh penggunaan first-line sebagai berikut.

/* Code CSS */
.content p:first-line {
    color: red;
}

<div class="content">
    <p>Dumet School Tempat Kursus Website, Digital Marketing & Desain Grafis.</p>
</div>

4. variable

Variable pada CSS memiliki fungsi untuk menampung nilai untuk kita bisa gunakan berualng kali, penulisan variable pada CSS harus diawali dengan tanda (--) dan ketika ingin mengakses nilai tersebut cukup dengan mengetikan var(--nama-variable), contoh penggunaan varibale CSS sebagai berikut.

/* Code CSS */
:root {
    --background-utama: tomato;
}
a {background-color: var(--background-utama); color: white;}

<div class="content">
    <p> <a href="">Dumet School</a> Tempat Kursus Website, Digital Marketing & Desain Grafis.</p>
</div>

Baiklah cukup sekian pembahasan kali ini tentang pseudo elemen dan variable CSS semoga bermanfaat :)

21 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat