Mengenal :target Selector Pada CSS

Hallo teman-teman pada artikel kali ini saya akan Mengenalkan :target Selector Pada CSS.

Selector seperti ini biasa kita kenal dengan pseudo-selector,pada fungsinya selector seperti ini digunakan untuk memberikan style pada id yang kita arahkan pada href pada element a atau tag a pada HTML.
Untuk lebih jelasnya sekarang kita terapkan pada studi kasusus, disini saya akan merubah suatu style pada suatu element HTML, silahkan teman-teman ketikan script berikut ini:

<!DOCTYPE html>
<html>
<head>

</head>
<body>


<p><a href="#text1">content 1</a></p>
<p><a href="#text2">content 2</a></p>

<p id="text1"><b>content 1</b></p>
<p id="text2"><b>content 2</b></p>


</body>
</html>

Script diatas saya membuat sebuah link dimana link tersebut mengarahkan kepada #text1 dan #text2 yang dimana saya juga membuat p dengan id yang saya targetkan tersebut, jika sudah coba teman-teman ketikan script CSS berikut:

<style>
:target {
    border: 3px solid red;
    background-color: blue;
}
</style>

saya mengatur selector :target yang mengarahkan style tersebut ke id yang sama seperti yang saya jelaskan tadi,

Sehingga kelengkapan scriptnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style>
:target {
    border: 3px solid red;
    background-color: blue;
}
</style>
</head>
<body>


<p><a href="#text1">content 1</a></p>
<p><a href="#text2">content 2</a></p>

<p id="text1"><b>content 1</b></p>
<p id="text2"><b>content 2</b></p>


</body>
</html>

jika sudah, silahkan teman-teman save dan lihat hasilnya, jika benar maka hasilnya akan seperti berikut:

warna yang kita berikan pada selector: akan tampil setelah kita klik salah satu link yang kita telah isi hrefnya dengan #text1 atau #text2,Â gimana teman-teman sangat mudah kan? untuk tutorial kali ini tentang mengenal-target-selector-pada-css, silahkan teman-teman peraktekan sendiri, semoga bermanfaat, terimakasih.

Kategori