CSS Pseudo-Class

View Categories

CSS Pseudo-Class

Apa itu Pseudo-class?

Pseudo-class digunakan untuk menentukan status khusus suatu elemen.

Misalnya, dapat digunakan untuk:

  • Memberi style pada elemen saat pengguna mengarahkan mouse ke atasnya
  • Style link yang telah dikunjungi dan yang belum dikunjungi berbeda
  • Memberi style pada elemen saat mendapatkan fokus

Sintaks

Sintaks pseudo-class:

selector:pseudo-class {
property: value;
}

Anchor Pseudo-class

Link dapat ditampilkan dengan berbagai cara, berikut merupakan contohnya :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Menata style link berdasarkan status link tersebut</h2>

<p><b><a href="default.asp" target="_blank">Ini adalah tautan</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam definisi CSS agar efektif.</p>

</body></html>

Jalankan Contoh

Pseudo-class dan HTML

Pseudo-class dapat digabungkan dengan class HTML:

Bila mengarahkan kursor ke link, maka link tersebut akan berubah warna:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-Class dan Class HTML</h2>

<p>Saat Anda mengarahkan kursor ke tautan pertama di bawah, warna dan ukuran font akan berubah.</p>

<p><a class="highlight" href="css_syntax.asp">Sintaks CSS</a></p>

<p><a href="default.asp">Tutorial CSS</a></p>

</body></html>

Jalankan Contoh

Arahkan Kursor ke <div>

Contoh penggunaan pseudo-class :hover pada elemen <div> :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Arahkan kursor ke elemen div di bawah untuk mengubah warna latar belakangnya.</p>

<div>Arahkan Mouse ke Saya</div>

</body></html>

Jalankan Contoh

Tooltip Hover Sederhana

Arahkan kursor ke elemen <div> untuk menampilkan elemen <p> (seperti tooltip):

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Arahkan kursor ke elemen div ini untuk menampilkan elemen p
  <p>Tada! Ini aku!</p>
</div>

</body></html>

Jalankan Contoh

CSS – pseudo-class :first-child 

Pseudo Class :first-child mencari elemen tertentu yang merupakan elemen anak pertama dari elemen tertentu.

Mencari elemen <p> pertama

Dalam contoh berikut, selector mencari elemen <p> pertama yang merupakan first-child dari setiap elemen:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>Ini beberapa teks.</p>
<p>Ini beberapa teks.</p>

<div>
  <p>Ini beberapa teks.</p>
  <p>Ini beberapa teks.</p>
</div>

</body></html>

Jalankan Contoh

Mencari elemen <i> pertama di semua elemen <p>

Dalam contoh berikut, selector mencari elemen <i> pertama di semua elemen <p> :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>
<p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>

</body></html>

Jalankan Contoh

Mencari semua elemen <i> pada elemen <p> pertama

Dalam contoh berikut, selector mencari semua elemen <i> di elemen <p> pertama yang merupakan first-child dari elemen lain:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>
<p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>

<div>
  <p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>
  <p>Saya adalah orang yang <i>kuat</i>. Saya adalah orang yang <i>kuat</i>.</p>
</div>

</body></html>

Jalankan Contoh

CSS – pseudo-class :lang 

Pseudo-class :lang memungkinkan untuk menentukan aturan khusus untuk berbagai bahasa.

Pada contoh di bawah ini, :lang mendefinisikan tanda kutip untuk elemen <q> dengan lang=”no”:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Beberapa teks <q lang="no">Kutipan dalam paragraf</q> Beberapa teks.</p>
<p>Dalam contoh ini, :lang mendefinisikan tanda kutip untuk elemen q dengan lang="no":</p>

</body></html>

Jalankan Contoh

Referensi Semua CSS Pseudo class

CSS Selector :active

Contoh

Pilih dan style link yang active:

<!DOCTYPE html>
<html>
<head>
<style>
a:active {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector active</h1>

<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">W3schools.com</a><br>
<a href=" <a href="https://www.w3schools.com/html/">https://www.w3schools.com/html/</a> ">HTML</a><br>
<a href=" <a href="https://www.w3schools.com/css/">https://www.w3schools.com/css/</a> ">CSS</a>

<p><b>Catatan:</b> selector :active memberi style pada tautan active.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :activedigunakan untuk memilih dan mengatur style link yang berada dalam keadaan aktif.

Sebuah link menjadi aktif saat diklik.

Tips : selector :active dapat digunakan di semua elemen, bukan hanya link.

Kiat: Gunakan selector :link untuk mengatur style link ke halaman yang belum dikunjungi, selector :visit  untuk mengatur style link ke halaman yang sudah dikunjungi dan selector :hover untuk mengatur style link saat mengarahkan mouse ke link tersebut.

Catatan: Selector :active seharusnya muncul setelah :hover (jika ada) dalam definisi CSS agar lebih efektif!

Contoh

Pilih dan style elemen <p>, <h1> dan <a> saat dikliknya:

<!DOCTYPE html>
<html>
<head>
<style>
p:active, h1:active, a:active{
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selamat Datang di Beranda Saya</h1>

<div class="intro">
<h2 id="firstname">Nama saya Donald</h2>
<p id="kotaasal">Saya tinggal di Duckburg</p>
<p>Sahabat <b>terbaik</b> saya adalah Mickey</p>
</div>

<h2>Tautan:</h2>
<p>Ini adalah situs web favorit saya:</p>
<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">w3schools.com</a>
<a href=" <a href="http://www.disney.com">http://www.disney.com</a> " target="_blank">disney.com</a>
<a href=" <a href="http://www.wikipedia.org">http://www.wikipedia.org</a> " target="_top">wikipedia.org</a>
<p><b>Catatan:</b> Klik paragraf, tajuk, dan tautan untuk melihat pengaruhnya.</p>
<p><b>Catatan:</b> Di IE7, contoh ini hanya akan bekerja pada tautan.</p>

</body></html>

Jalankan Contoh

Contoh

Pilih dan style link menggunakan unvisited, visited, hover dan active links:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: yellow;
} 
</style>
</head>
<body>

<p>Arahkan mouse dan klik tautan: <a href="https://www.w3schools.com">w3schools.com</a></p>

</body></html>

Jalankan Contoh

Contoh

Style link dengan tampilan yang berbeda :

<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
</head>
<body>

<p>Arahkan kursor ke tautan untuk melihat perubahannya.</p>

<p><a class="ex1" href="default.asp">Tautan ini berubah warna</a></p>
<p><a class="ex2" href="default.asp">Tautan ini mengubah ukuran font</a></p>
<p><a class="ex3" href="default.asp">Tautan ini mengubah warna latar belakang</a></p>
<p><a class="ex4" href="default.asp">Tautan ini mengubah font-family</a></p>
<p><a class="ex5" href="default.asp">Tautan ini mengubah dekorasi teks</a></p>

</body></html>

Jalankan Contoh

Halaman Terkait

CSS Selector :checked

Contoh

Atur width dan height untuk semua elemen <input> yang dicentang:

<!DOCTYPE html>
<html>
<head>
<style> 
input:checked {
  height: 50px;
  width: 50px;
}
</style>
</head>
<body>

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Pria<br>
  <input type="radio" value="female" name="gender"> Perempuan<br>
  <input type="checkbox" checked="checked" value="Sepeda"> Saya punya sepeda<br>
  <input type="checkbox" value="Mobil"> Saya punya mobil
</form>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :checked akan memilih setiap elemen <input> yang dipilih (hanya untuk input bertipe radio button, checkbox dan option pada elemen select).

Contoh

Atur width dan height untuk semua elemen <option> yang dipilih:

<!DOCTYPE html>
<html>
<head>
<style> 
option:checked {
  height: 100px;
  width: 100px;
}
</style>
</head>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body></html>

Jalankan Contoh

CSS Selector :disabled

Contoh

Tetapkan warna latar belakang untuk semua elemen inputan  type=”text” yang disable :

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  Nama depan: <input type="text" value="Mickey"><br>
  Nama belakang: <input type="text" value="Mouse"><br>
  Negara: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :disabled akan memilih setiap elemen yang dinonaktifkan (kebanyakan digunakan pada elemen form).

Contoh

Tetapkan warna latar untuk semua elemen <input> yang disable:

<!DOCTYPE html>
<html>
<head>
<style> 
input:enabled {
  background: #ffff00;
}

input:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  Nama depan: <input type="text" value="Mickey"><br>
  Nama belakang: <input type="text" value="Mouse"><br>
  Negara: <input type="text" value="Disneyland" disabled><br>
  Kata sandi: <input type="password" name="password" value="psw" disabled><br>
  Email: <input type="email" value="[email protected]" name="usremail">
</form>

</body></html>

Jalankan Contoh

Contoh

Tetapkan warna latar untuk semua elemen <option> yang disable:

<!DOCTYPE html>
<html>
<head>
<style> 
option:disabled {
  background: red;
}
</style>
</head>
<body>

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" disabled>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi" dinonaktifkan>Audi</option>
  <option value="bmw">BMW</option>
</select>

</body></html>

Jalankan Contoh

CSS Selector :empty

Contoh

Tentukan warna latar untuk elemen <p> :

<!DOCTYPE html>
<html>
<head>
<style> 
p:empty {
  width: 100px;
  height: 20px;
  background: #ff0000;
}
</style>
</head>
<body>

<p></p>
<p>Sebuah paragraf.</p>
<p>Paragraf lainnya.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :empty akan memilih setiap elemen yang tidak memiliki turunan (termasuk node tulisan).

CSS Selector :enabled

Contoh

Tetapkan warna latar untuk semua elemen <input> dengan type=”text”:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text]:enabled {
  background: #ffff00;
}

input[type=text]:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  Nama depan: <input type="text" value="Mickey"><br>
  Nama belakang: <input type="text" value="Mouse"><br>
  Negara: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :enabled akan memilih setiap elemen yang diaktifkan (kebanyakan digunakan pada elemen form).

Contoh

Tetapkan warna latar untuk semua elemen <input> :

<!DOCTYPE html>
<html>
<head>
<style> 
input:enabled {
  background: #ffff00;
}

input:disabled {
  background: #dddddd;
}
</style>
</head>
<body>

<form action="">
  Nama depan: <input type="text" value="Mickey"><br>
  Nama belakang: <input type="text" value="Mouse"><br>
  Negara: <input type="text" value="Disneyland" disabled><br>
  Kata sandi: <input type="password" name="password" value="psw" disabled><br>
  Email: <input type="email" value="[email protected]" name="usremail">
</form >

</body></html>

Jalankan Contoh

CSS Selector :first-child

Contoh

Pilih dan style setiap elemen <p> yang merupakan anak pertama dari induknya:

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

<p>Paragraf ini adalah turunan pertama dari induknya (badan).</p>
<p>Paragraf ini bukan turunan pertama dari induknya (badan).</p>

<div>
  <p>Paragraf ini adalah turunan pertama dari induknya (div).</p>
  <p>Paragraf ini bukan turunan pertama dari induknya (div).</p>
</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :first-child digunakan untuk memilih elemen yang merupakan anak pertama dari induknya.

Contoh

Pilih dan style setiap elemen <i> dari setiap selemen <p>, dimana elemen <p> adalah anak pertama dari induknya:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  background: yellow;
}
</style>
</head>
<body>

<p>Saya pria <i>kuat</i>. Saya adalah pria <i>kuat</i>.</p>
<p>Saya pria <i>kuat</i>. Saya adalah pria <i>kuat</i>.</p>

</body></html>

Jalankan Contoh

Contoh

Pilih dan style elemen <li> pertama dalam list:

<!DOCTYPE html>
<html>
<head>
<style>
li:first-child {
  background: yellow;
} 
</style>
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ol>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ol>

</body></html>

Jalankan Contoh

Contoh

Pilih dan style pada anak elemen pertama (first-child) dari setiap elemen <ul> :

<!DOCTYPE html>
<html>
<head>
<style>
ul > :first-child {
  background:yellow;
}
</style>
</head>
<body>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Coca Cola</li>
</ul>

</body></html>

Jalankan Contoh

CSS Selector :focus

Contoh

Pilih dan style pada kolom input saat mendapat fokus:

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector fokus</h1>

<p>Klik tulisan untuk melihat latar belakang menjadi kuning.</p>

<form>
Nama depan: <input type="text" name="firstname"><br>
Nama belakang: <input type="text" name="lastname">
</form>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :focus digunakan untuk memilih elemen yang memiliki fokus.

Tips: Selector :focus diizinkan pada elemen yang menerima aktivitas keyboard atau input pengguna lainnya.

Contoh

Bila elemen<input type=”text”> mendapat fokus, ubah lebar secara bertahap dari 100px menjadi 250px:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
  width: 100px;
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
}
input[type=text]:focus {
  width: 250px;
}
</style>
</head>
<body>
<h1>Properti width</h1>

<p>Atur lebar input menjadi 100 piksel. Namun, saat kolom input mendapatkan fokus, buat lebarnya menjadi 250 piksel.</p>

Cari: <input type="text" name="search">

</body></html>

Jalankan Contoh

CSS Selector :hover

Contoh

Pilih dan style link saat mengarahkan mouse ke atasnya:

<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector hover</h1>

<p>Tautan dengan selector hover.</p>

<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">w3schools.com</a>
<a href=" <a href="https://www.wikipedia.org">https://www.wikipedia.org</a> ">wikipedia.org</a>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :hover digunakan untuk memilih elemen saat mengarahkan kursor ke elemen tersebut.

Contoh

Pilih dan style elemen <p>, <h1> dan <a> saat mengarahkan mouse ke atasnya:

<!DOCTYPE html>
<html>
<head>
<style>
p:hover, h1:hover, a:hover {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selamat Datang di Beranda Saya</h1>

<div class="intro">
<h2 id="firstname">Nama saya Donald</h2>
<p id="kotaasal">Saya tinggal di Duckburg</p>
<p>Sahabat <b>terbaik</b> saya adalah Mickey</p>
</div>

<h2>Tautan:</h2>
<p>Ini adalah situs web favorit saya:</p>
<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">w3schools.com</a>
<a href=" <a href="http://www.disney.com">http://www.disney.com</a> " target="_blank">disney.com</a>
<a href=" <a href="http://www.wikipedia.org">http://www.wikipedia.org</a> " target="_top">wikipedia.org</a>
<p><b>Catatan:</b> Arahkan kursor ke paragraf, tajuk, dan tautan untuk melihat pengaruhnya.</p>
<p><b>Catatan:</b> Agar :hover berfungsi di IE, DOCTYPE harus dideklarasikan.</p>

</body></html>

Jalankan Contoh

Contoh

Pilih dan style link yang belum dikunjungi visited, hover dan active links:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: yellow;
} 
</style>
</head>
<body>

<p>Arahkan mouse dan klik tautan: <a href="https://www.w3schools.com">w3schools.com</a></p>

</body></html>

Jalankan Contoh

Contoh

Atur style link dengan style yang berbeda :

<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
</head>
<body>

<p>Arahkan kursor ke tautan untuk melihat perubahan tata letak.</p>

<p><a class="ex1" href="default.asp">Tautan ini berubah warna</a></p>
<p><a class="ex2" href="default.asp">Tautan ini mengubah ukuran font</a></p>
<p><a class="ex3" href="default.asp">Tautan ini mengubah warna latar belakang</a></p>
<p><a class="ex4" href="default.asp">Tautan ini mengubah font-family</a></p>
<p><a class="ex5" href="default.asp">Tautan ini mengubah dekorasi teks</a></p>

</body></html>

Jalankan Contoh

Contoh

Arahkan kursor ke elemen <span> untuk menampilkan elemen <div> (seperti tooltip):

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: yellow;
  padding: 20px;
  display: none;
}
  
span:hover + div {
  display: block;
}
</style>
</head>
<body>

<span>Arahkan kursor ke saya!</span>
<div>Saya akan ditampilkan saat mengarahkan kursor</div>

</body></html>

Jalankan Contoh

Contoh

Tampilkan dan sembunyikan menu “dropdown” pada mouse hover:

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: green;}
div a {
  text-decoration: none;
  color: white;
  font-size: 20px;
  padding: 15px;
  display:inline-block;
}
ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li { 
  background: #555; 
  display: block; 
}
ul li ul li a {display:block !important;} 
ul li ul li:hover {background: #666;}
</style>
</head>
<body>

<div>
  <a href="#">Tautan Tidak Terpakai</a>
  <ul>
    <li>
      <a href="#">Tautan DropDown</a>
      <ul>
        <li><a href="#">Tautan 1</a></li>
        <li><a href="#">Tautan 2</a></li>
        <li><a href="#">Tautan 3</a></li>
      </ul>
    </li>
  </ul>
</div>

</body></html>

Jalankan Contoh

CSS Selector :in-range

Contoh

Pilih dan atur style jika nilai elemen <input> mempunyai nilai pada range tertentu:

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {
  border: 2px solid yellow;
}
</style>
</head>
<body>

<h1>Selector in-range</h1>

<input type="nomor" min="5" max="10" value="7">

<p>Coba ketik angka di luar range (kurang dari 5 atau lebih tinggi dari 10), untuk melihat perubahannya.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :in-range memilih semua elemen dengan nilai yang berada dalam rentang tertentu.

Catatan: Selector :in-range hanya berfungsi untuk elemen input dengan atribut min atau max!

Tips: Gunakan selector :out-of-range untuk memilih semua elemen dengan nilai di luar rentang yang ditentukan.

CSS Selector :invalid

Contoh

Pilih dan atur style jika nilai elemen <input> tidak valid:

<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>Selector invalid </h1>

<input type="email" value="supportEmail">

<p>Coba ketikkan alamat email yang benar, untuk melihat perubahannya.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :invalid memilih elemen form dengan nilai yang tidak divalidasi sesuai dengan pengaturan elemen.

Catatan: Selector :invalid hanya berfungsi untuk elemen form dengan validasi, seperti elemen input dengan atribut min dan max, input email yang harus dimasukkan dengan format email resmi, atau input angka yang harus mempunyai nilai numerik, dll.

Tips: Gunakan selector :valid untuk memilih elemen form dengan nilai yang valid sesuai dengan pengaturan yang ditentukan.

CSS Selector :lang 

Contoh

Pilih dan atur style setiap elemen <p> dengan nilai atribut lang sama dengan “it” (Italia):

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it) { 
  background: yellow;
}
</style>
</head>
<body>

<h1>Selector lang</h1>

<p>Saya tinggal di Italia.</p>
<p lang="it">Ciao bella!</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :lang() digunakan untuk memilih elemen dengan atribut lang dengan nilai yang ditentukan.

Catatan: Nilai atribut lang sering berupa kode bahasa, seperti lang=”fr” (untuk bahasa Prancis), atau gabungan dua kode bahasa, seperti lang=”fr-ca “ (untuk bahasa Prancis Kanada).

CSS Selector :last-child

Contoh

Tentukan warna latar belakang untuk elemen <p> yang merupakan anak terakhir dari induknya:

<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child {
  background: #ff0000;
}
</style>
</head>
<body>

<p>Paragraf pertama.</p>
<p>Paragraf kedua.</p>
<p>Paragraf ketiga.</p>
<p>Paragraf keempat.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :last-child memilih elemen yang merupakan anak terakhir dari induknya.

Tips: Selector p:last-child sama dengan p:nth-last-child.

CSS Selector :link

Contoh

Pilih dan atur style link yang belum dikunjungi:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector link</h1>

<p>Selector link untuk memberikan style pada link yang belum dikunjungi.</p>

<a href=" <a href="https://www.w3schools.com">https://www.w3schools.com</a> ">W3Sschools</a>
<a href=" <a href="http://www.wikipedia.org">http://www.wikipedia.org</a> ">Wikipedia</a>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :link digunakan untuk memilih link yang belum dikunjungi.

Contoh

Pilih dan atur style link yang belum dikunjungi, visited, hover dan active links:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: green;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: yellow;
} 
</style>
</head>
<body>

<p>Arahkan mouse dan klik tautan: <a href="https://www.w3schools.com">w3schools.com</a></p>

</body></html>

Jalankan Contoh

Contoh

Mengatur style Link dengan style berbeda :

<!DOCTYPE html>
<html>
<head>
<style>
a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
</style>
</head>
<body>

<p>Arahkan kursor ke tautan untuk melihat perubahannya.</p>

<p><a class="ex1" href="default.asp">Tautan ini berubah warna</a></p>
<p><a class="ex2" href="default.asp">Tautan ini mengubah ukuran font</a></p>
<p><a class="ex3" href="default.asp">Tautan ini mengubah warna latar belakang</a></p>
<p><a class="ex4" href="default.asp">Tautan ini mengubah font-family</a></p>
<p><a class="ex5" href="default.asp">Tautan ini mengubah dekorasi teks</a></p>

</body></html>

Jalankan Contoh

CSS Selector :not(selector)

Contoh

Menetapkan warna latar belakang untuk semua elemen yang merupakan bukan elemen <p> :

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: #000000;
}

:not(p) {
  color: #ff0000;
}
</style>
</head>
<body>

<h1>Ini adalah judul</h1>

<p>Ini adalah sebuah paragraf.</p>
<p>Ini adalah paragraf lain.</p>

<div>Ini adalah beberapa teks dalam elemen div.</div>

<a href="https://www.w3schools.com" target="_blank">Tautan ke W3Schools!</a>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :not( selector) akan memilih setiap elemen yang BUKAN merupakan element/selector yang ditentukan.

CSS Selector :optional

Contoh

Pilih dan atur style jika elemen <input> tidak memiliki atribut “required“:

<!DOCTYPE html>
<html>
<head>
<style>
input:optional {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector optional </h1>

<p>Elemen input optional:<br><input></p>

<p>Elemen input yang required:<br><input required></p>

<p>Selector optional memilih elemen input tanpa atribut required.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :optional memilih elemen form yang bersifat opsional.

Elemen form tanpa atribut required didefinisikan sebagai opsional.

Catatan: Selector :optional hanya berlaku untuk elemen form input, select dan textarea.

Tips: Gunakan selector :required untuk memilih elemen form yang diperlukan.

CSS Selector :out-of-range

Contoh

Pilih dan atur style jika nilai elemen <input> “out of range“:

<!DOCTYPE html>
<html>
<head>
<style>
input:out-of-range {
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>Selector out-of-range </h1>

<input type="number" min="5" max="10" value="17">

<p>Coba ketik angka dalam range yang diberikan (antara 5 dan 10), untuk melihat perubahannya.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :out-of-range memilih semua elemen dengan nilai di luar rentang yang ditentukan.

Catatan: Selector :out-of-range hanya berfungsi untuk elemen input dengan atribut min dan/atau max.

Tips: Gunakan selector :in-range untuk memilih semua elemen dengan nilai yang berada dalam rentang tertentu.

CSS Selector :read-only

Contoh

Pilih dan atur style jika elemen input hanya bisa dibaca dan tidak dapat diubah “read only“:

<!DOCTYPE html>
<html>
<head>
<style>
input:read-only {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector read-only </h1>

<p>Selector read-only memilih elemen input dengan atribut readonly.</p>

<p>Elemen input normal:<br><input value="hello"></p>

<p>Elemen input readonly:<br><input readonly value="hello"></p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :read-only memilih elemen yang “readonly“.

CSS Selector :read-write

Contoh

Pilih dan atur style jika elemen input tidak “readonly“:

<!DOCTYPE html>
<html>
<head>
<style>
input:read-write {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector read-write</h1>

<p>Selector read-write memilih elemen input tanpa atribut readonly.</p>

<p>Elemen input normal:<br><input value="hello"></p>

<p>Elemen input readonly:<br><input readonly value="hello"></p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :read-write dapat memilih elemen form yang dapat dibaca “readable” dan dapat di tulis “writeable“.

CSS Selector :required

Contoh

Pilih dan atur style jika elemen <input> memiliki atribut “required“:

<!DOCTYPE html>
<html>
<head>
<style>
input:required {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector required </h1>

<p>Elemen input optional:<br><input></p>

<p>Elemen input yang required:<br><input required></p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :required memilih elemen form yang wajib diisi.

Elemen formulir dengan atribut wajib, maka inputan tersebut wajib di isi dan tidak boleh kosong.

Catatan: Selector :required hanya berlaku untuk elemen form input, select dan textarea.

Tips: Gunakan selector :opsional untuk memilih elemen formulir yang bersifat opsional.

CSS Selector :root

Contoh

Atur warna latar belakang untuk dokumen HTML:

<!DOCTYPE html>
<html>
<head>
<style> 
:root {
  background: #ff0000;
}
</style>
</head>
<body>

<h1>Ini adalah judul</h1>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :root cocok dengan elemen root dokumen.

Dalam HTML, elemen root selalu merupakan elemen html.

CSS Selector :valid

Contoh
Pilih dan atur style jika nilai elemen <input> valid:

<!DOCTYPE html>
<html>
<head>
<style>
input:valid {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>Selector valid</h1>

<input type="email" value="[email protected]">

<p>Coba ketikkan alamat email yang salah, untuk melihat perubahannya.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :valid memilih elemen form dengan nilai yang valid sesuai dengan pengaturan elemen.

Catatan: Selector :valid hanya berfungsi untuk elemen form dengan validasi.

Tips: Gunakan selector :invalid untuk memilih elemen form dengan nilai yang tidak valid sesuai dengan pengaturan elemen.

CSS Selector :visited

Contoh

Pilih dan atur style link yang dikunjungi:

<!DOCTYPE html>
<html>
<head>
<style>
a:visited {
  color: pink;
}
</style>
</head>
<body>

<h1>Selector visited </h1>
<p>Selector visited digunakan untuk memilih link yang telah dikunjungi.</p>
<a href=" https://www.w3schools.com ">Beranda W3Schools </a>
<br>
<a href=" https://www.w3schools.com/html/ ">Tutorial HTML W3Schools </a>
<br>
<a href=" https://www.w3schools.com/css/ ">Tutorial CSS W3Schools </a>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Selector :visited digunakan untuk memilih link yang telah dikunjungi.

Tutorial sebelumnya : CSS Combinators
Tutorial setelahnya : Opacity Atau Transparansi Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan