Selektor CSS menggunakan selektor pseudo class merupakan selektor pada CSS untuk menambahkan efek khusus ataupun gaya tertentu pada suatu elemen HTML. Pseudo Class ditandai dengan tanda semi colon ":" dalam memberikan perujukkan suatu elemen HTML. Pseudo Class dapat diterapkan pada beberapa kasus misalnya saat pointer mouse berada di atas suatu elemen HTML (:hover), saat kursor pointer berada di dalam suatu elemen input formulir (:focus) ataupun untuk menunjukkan elemen anakkan pertama yang berada pada elemen induk (:first-child) dan lainnya.
Pseudo Class sering digunakan untuk mendapatkan efek khusus tanpa harus menggunakan script javascript dalam membuat efek tampilan. Pseudo Class :hover adalah pseudo class yang cukup sering digunakan pada elemen tag , yang akan membuat elemen tersebut efek tersorot otomatis saat mouse melintas di atas elemen tersebut.
1Selector:pseudo-class {property : value}
Berikut selektor Pseudo Class yang sering digunakan dalam menata halaman HTML :
No.SelektorDeskripsi1.:linkMenyeleksi semua tautan yang belum dikunjungi2.:visitedMenyeleksi semua tautan yang sudah dikunjungi3.:hoverMenyeleksi tautan pada saat mouse di atas elemen4.:activeMenyeleksi semua tautan yang aktif5.:focusMenyeleksi konten teks (input) saat posisi terfokus6.:first-childMenyeleksi elemen anakan pertama di dalam elemen indukkan7.:last-childMenyeleksi elemen anakan terakhir di dalam elemen indukkan8.:nth-child(n)Menyeleksi elemen anakan ke-n di dalam elemen indukkan9:disabledMenyeleksi input yang dalam posisi disabled10.:checkedMenyeleksi input yang dalam posisi dicentang11.:enabledMenyeleksi input yang dalam posisi enabled
Pseudo Class :link
Pseudo Class :link digunakan untuk melakukan seleksi terhadap elemen tag hyperlink anchor saat elemen tersebut belum dikunjungi (diklik).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Belajar Style Sheet Pada CSS
Hasil Script :
Belajar Style Sheet Pada CSS
Tautan
Pseudo Class :hover
Pseudo Class :hover digunakan untuk melakukan seleksi terhadap elemen tag hyperlink anchor saat mouse melintas di atas elemen tersebut (mouse over).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Belajar Style Sheet Pada CSS
Silahkan arahkan mouse di tautan ini
Hasil Script :
Pseudo Class :focus
Pseudo Class :focus digunakan untuk melakukan seleksi terhadap elemen HTML, saat elemen tersebut dalam posisi mendapatkan focus.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Belajar Style Sheet Pada CSS
Silahkan isi nama anda :
Hasil Script :
Pseudo Class :first-child
Pseudo Class :first-child digunakan untuk melakukan seleksi terhadap elemen HTML yang memiliki elemen anakkan. Elemen anakkan yang pertama yang akan diseleksi. Elemen induk dapat berupa div, paragraf, list item (li) hingga table head (th) maupun table data (td) pada tag .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Belajar Style Sheet Pada CSS
No.Nama BenuaNama Negara1.AsiaIndonesia2.AsiaMalaysia3.AsiaSingapura4.EropaBelanda5.EropaInggris
Pseudo Class :last-child
Pseudo Class :last-child digunakan untuk melakukan seleksi terhadap elemen HTML yang memiliki elemen anakkan. Elemen anakkan yang terakhir yang akan diseleksi.
Example
Select and style an input field when it gets focus:
input:focus {
background-color: yellow;
}
More "Try it Yourself" examples below.
Definition and Usage
The :focus selector is used to select the element that has focus.
Tip: The :focus selector is allowed on elements that accept keyboard events or other user inputs.
Browser Support
The numbers in the table specifies the first browser version that fully supports the selector.
Selector:focus4.08.02.03.19.6
CSS Syntax
:focus {
css declarations;
} Demo
More Examples
Example
When an gets focus, gradually change the width from 100px to 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Related Pages
CSS tutorial: CSS Pseudo classes