Hai sobat.. pada kesempatan kali ini kita akan membahas salah satu pseudo class selector yang powerfull dan sangat berguna untuk penggunaan sehari-hari yaitu pseudo class :not(). Pseudo class ini mulai dikenalkan pada CSS 3, yang berarti bahwa untuk Internet Explorer, hanya versi 9+ yang mendukung, namun seiring dengan semakin berkurangnya penggunaan browser IE versi lama, maka selector ini menjadi penting untuk kita pelajari.
Sesuai namanya, Pseudo class :not() akan menseleksi semua element selain yang ada dalam argumen, contoh: div:not(.warning) akan menseleksi `semua element <div> yang tidak memiliki class warning, article p:not(:first-child) akan menseleksi semua element <p> yang ada di dalam element <article> yang urutannya bukan urutan pertama.
Perlu diperhatikan bahwa ketika kita menulis :not() tanpa diawali dengan selector apapun, berarti kita sedang menggunakan universal selector yang berarti akan menseleksi semua element termasuk <html> dan <body>, sehingga penggunaan :not(:link):not(:visited) akan sama dengan *:not(:link):not(:visited), contoh:
:not(:link):not(:visited) {
background-color: red;
}akan membuat background body menjadi merah, oleh karena itu, gunakan selector ini se-spesifik mungkin (diawali dengan selector lain), sehingga menghasilkan style sesuai dengan yang kita harapkkan. Contoh lebih lanjut penggunaan selector :not()
<div>
<p>Paragraf pertama</p>
<p>Paragraf kedua</p>
<p>Paragraf ketiga</p>
</div>Ketika ingin membuat teks pada semua paragraf selain paragraf pertama menjadi italic, kita cukup menuliskan style sebagai berikut:
p:not(:first-child)
{
font-style: italic;
}Jika tidak menggunakkan selector :not(), kita harus mendeklarasikan dua css rule, yaitu:
p {
font-style: italic;
}
p:first-child {
font-style: normal;
}Argumen
Pseudo class :not() termasuk dalam kelompok functional pseudo class yang artinya mirip dengan fungsi yang ada pada bahasa pemrograman pada umumnya yang salah satunya dapat menerima argumen. Argumen yang dapat diterima oleh selector ini berupa:
- Single/satu argument.
- Hanya dapat menerima simpel selector, seperti: type, class, ID, dan pseudo-class, namun tidak dapat menggunakan :not() sebagai argumen, contoh:
:not(:not()) - Tidak dapat menggunakan complex selector, yang artinya combinator (spasi, + dan >) tidak dapat digunakan.
- Tidak dapat menggunakan compound selector, seperti
label.checkbox - Tidak dapat menggunakan pseudo elements.
Pada CSS Level 4 (CSS 4) yang saat ini masih dalam tahap penyusunan draft, kita dapat menggunakan multiple argumen dengan penulisan yang dipisahkan dengan koma, misal :not(.warning, #notice, :first-child). Meskipun saat ini beberapa browser sudah mendukungnya, namun masih banyak yang belum, sehingga sebaiknya tidak digunakan.
Chaining Pseudo Class :not()
Seperti pada umumnya penulisan css, kita dapat menggabungkan beberapa selector yang memiliki style yang sama, dengan tujuan untuk menyederhanakan penulisan. Untuk pseudo class :not(), karena sifatnya mutually exclusive, kita tidak bisa menggunakan model penggabungan seperti yang biasa kita lakukan, seperti:
input:not([type=checkbox]),
input:not([type=radio]),
input:not([type=range]) {
padding: 0;
}input:not([type=range]) akan menimpa semua style diatasnya, sehingga yang akan terpakai hanya input:not([type=range]), untuk itu kita perlu membuat suatu kaitan(chaining), contoh: input:not([type=checkbox]):not([type=radio]):not([type=range]), yang pada CSS 4 dapat kita sederhanakan menjadi input:not([type=checkbox], [type=radio], [type=range])
Contoh Penggunaan Pseudo Class :not()
Contoh 1: Pseudo Class :not() Pada Form
Beberapa contoh situasi dimana kita memerlukan pseudo class :not() diantaranya adalah ketika kita mendesain suatu form, dimana setidaknya disana ada element input berupa text dan input berupa submit, lebih lengkap lagi ada checkbox atau radio button. Misal seperti contoh berikut ini:
HTML:
<form id="form" method="post" target="">
<ul class="form">
<li><label>Nama</label>: <input type="text" name="nama" value="" placeholder="Name"/></li>
<li><label>Email</label>: <input type="email" name="nama" value="" placeholder="john@gmail.com"/></li>
<li><label>Website</label>: <input type="url" name="nama" value="" placeholder="http://www.example.com"/></li>
<li><label></label>: <input type="checkbox" name="joinnl" id="joinnl" value="joinnl"/><label for="joinnl">Join Newsletter</label></li>
<li><label></label> <input type="submit" name="submit" value="Submit"/></li>
</ul>
</form>CSS Rule:
.form label:not([for]) {
display:inline-block;
width: 100px;
}
.form label[for] {
cursor: pointer;
}
.form input:not([type=checkbox]):not([type=submit]) {
font-size:15px;
padding:9px;
border:1px solid #CCCCCC;
transition: all .3s;
}
.form input:not([type=checkbox]):not([type=submit]):hover {
border-color: rgba(21,127,219,.63);
}
.form input:not([type=checkbox]):not([type=submit]):focus {
box-shadow: 0px 0px 7px 0px rgba(21,127,219,.63);
border-color:#4ab1ff;
background: #F5F5F5;
}Pada contoh diatas, element <label> pada Join Newsletter memiliki attribute for, sedangkan yang digunakan pada Nama, Email, dan Website tidak, sehingga untuk mengubah bentuk cursor pada Join Newsletter menjadi pointer, kita gunakan selector .form label[for], demikian juga untuk membuat lebar element <label> pada Nama, Email, dan Website menjadi 100px, kita gunakan selector .form label:not([for])
HTML 5 mendukung banyak type untuk input, sehingga untuk menseleksi element input pada nama, email, dan website, kita gunakan selector: input:not([type=checkbox]):not([type=submit]), alternatif lain adalah menggabungkan selector berdasarkan typenya:
.form input[type=text],
.form input[type=email],
.form input[type=url] {
/* deklarasi */
}
.form input[type=text]:hover,
.form input[type=email]:hover,
.form input[type=url]:hover {
/* deklarasi */
}
.form input[type=text]:focus,
.form input[type=email]:focus,
.form input[type=url]:focus {
/* deklarasi */
}Contoh 2: Horizontal Menu
Contoh lain penggunaan pseudo-class :not() adalah ketika membuat efek hover pada menu horizontal, contoh:
HTML
<nav class="sample-nav">
<ul class="sample-menu">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear"></div>
</nav>CSS Rule:
.sample-nav {
background-color: #4A4A4A;
}
.sample-nav ul {
float:right;
margin: 0;
padding: 0;
list-style-type: none;
}
.sample-nav ul li {
float: left;
border-right:1px solid #7D7D7D;
}
.sample-nav ul li.active {
background-color: #37B74D;
border: 0;
}
.sample-nav ul li:last-child {
border-right: none;
}
.sample-nav ul li:first-child {
border-left:1px solid #7D7D7D;
}
.sample-nav ul li a {
display: block;
color: #FFFFFF;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
.sample-nav ul li:not(.active):hover {
background-color: #403E3E;
}
.clear {
clear: both;
}Pada contoh diatas, kita hanya memberi efek hover pada element <li> yang tidak memiliki class active, css rule yang kita gunakan: .sample-nav ul li:not(.active):hover
Contoh 2: Tabel Heading
Contoh selanjutnya adalah ketika kita membuat style untuk heading tabel (<th>), contoh seperti tabel dibawah ini (diasumsikan kita tidak menggunakan <thead> dan <tbody>):
| Bulan | 2016 | 2015 | 2014 |
|---|---|---|---|
| Januari | 154.000.000 | 124.000.000 | 104.000.000 |
| Februari | 254.000.000 | 204.000.000 | 204.000.000 |
| Maret | 189.000.000 | 195.000.000 | 175.000.000 |
HTML:
<table class="sample-table">
<tr>
<th>Bulan</th>
<th>2016</th>
<th>2015</th>
<th>2014</th>
</tr>
<tr>
<th>Januari</th>
<td>154.000.000</td>
<td>124.000.000</td>
<td>104.000.000</td>
</tr>
<tr>
<th>Februari</th>
<td>254.000.000</td>
<td>204.000.000</td>
<td>204.000.000</td>
</tr>
<tr>
<th>Maret</th>
<td>189.000.000</td>
<td>195.000.000</td>
<td>175.000.000</td>
</tr>
</table>CSS Rule:
.sample-table {
border-collapse: collapse;
}
.sample-table td {
border: 1px solid #CCCCCC;
padding: 10px 25px;;
}
.sample-table th {
background: #E8E8E8;
border: 1px solid #CCCCCC;
padding: 10px;
}
.sample-table tr:not(:first-child) th {
text-align: left;
}Secara default, element <th> akan memberikan efek bold dan align center pada teks, pada contoh diatas, mulai baris ke dua kita ubah align pada element <th> menjadi rata kiri, untuk itu selector yang kita gunakan: .sample-table tr:not(:first-child) th
Browser Support
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 3.2 |
| Extended arguments | Not supported | Not supported | Not supported | Not supported | Not supported |
Sumber: Mozilla Developer Network
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com