css4:selector yang baru

css4:selector yang baru

Dengan adanya css4 maka design web semakin mengarah pada industri tersendiri, yang mulanya di awal 90an sedikit orang yang meliriknya. kini kemudahan kemudahan untuk mendesain malalui programming tampak menonjol, tidak lagi mengandalkan gambar yang sering kali lebih memboroskan bandwith.
beberapa draft css4 yang  saya baca  dari w3.org adalah mengenai css4 : selector. Berikut adalah tambahan selector dari css3: selector.

:column
Grid umumnya untuk kerapihan dari suatu layout web design yang beberapa bulan yag lalu heboh grid system, nah css4 ini dapat melengkapi dari grid system tersebut.
Adapun sintaxnya adalah :

:column
:nth-column  (an+b)
:nth-last-column (an+b)

contoh penggunaan
:nth-column (0n+1) {background-color:grey;}
yang artinya setiap kolom ganjil akan bewarna kelabu yang mana a dan b bisa diisi dengan angka cacah dan perhitungan dimulai dari awal, sedangkan perhitungan dari ahir maka menggunakan nth-last-column, seperti berikut ini:
:nth-last-column (2) {background-color:grey;}
yang artinya dari kolom terahir dihitunglah kolom kedua yang akan bewarna abu-abu.

:indeterminate
:checked
saat melihat halaman web sering sekali terlihat akan opsi untuk dipilih oleh pengunjung web baik itu berupa checkbox atau titik radio, nah indeterminate ini adalah semacam defaultnya yang tidak ada yang terpilih dari opsi tersebut saat pertama kali terpampang.

contoh:
:indeterminate {color : green;}

berarti saat terpampang pertama kali tidak ada yang terpilih dan bewarna hijau. yang mungkin pada halaman lain grup opsi ada yang menggunakan :checked secara defaultnya pada salah satu pilihan

:active-drop-target
:valid-drop-target
:invalid-drop-target


:local-link
:any-link

Pada kasus tertentu yang diinginkan adalah perlakuan khusus untuk beberapa link atau tautan yang berbeda dengan link lainnya. contoh kasus adalah link tertentu pada sidebar
yang sebagai misal adalah widget post dengan link readmore dan link eksternal. sehingga :

#sidebar:loca-link(1) {font-weight:bold;}
#sidebar:local-link(3) {text-decoration:none;}
:any-link {text-decoration:underline;}

nah dari code tersebut terlihat adalah link yang kedua dari sidebar hurufnya tebal sedangkan link yang keempat dari sidebar tersebut tidak ada dekorasi text,misal untuk "readmore" sedangkan link lainnya sesuai dengan perintah pada style yang tertulis pada halaman tersebut.

:matches(selector1, selector2,..) selector 3
Yang diinginkan dari pseudo-class ini adalah logika saat penulisan skrip untuk kemudahan  saat membacanya, lihatlah dari syntasnya sudah jelas nampak. jika mesin merender dan mulai membaca selector selector tesebut maka akan diberikan perintah.
contoh

:matches (#header,#conten,#sidebar) h1:first-letter {font-color: blue;}

artinya sebagai berikut: untuk elemen header,conten,dan sidebar maka h1-nya berawalkan huruf bearna biru. Adapun penulisan seperti dibawah ini tidak lagi diperlukan
#header h1:first-letter, #conten h1:first-letter, #sidebar h1:first-letter {font-color:blue}

:read-only  dan :read-write
Umumnya halaman web adalah berbentuk read-only sedangkan read write berguna untuk kelanjutan dari tulisan tersebut yang umumnya adalah kerja bareng beberapa orang yang terhubung melalui internet. Atau juga bisa untuk  komentar blog

contoh

:read-only { font-family: Verdana, Arial, sans-serif; }
:read-write { font-family: Monospace; background-color: gray; }

Pengartianya adalah sebagai berikut yang hanya bisa dibaca tak bisa diedit mempunyai huruf Arial sedangkan yang untuk diedit adalah berbackground abu abu dan berhuruf monospace, sehingga pengunjung lainnya (coworkers) akan segera mencoba mengedit yang berbackground abu abu jika perlu adanya tambahan tentang hal tersebut

:required dan :optional
Industri web semakin menjamur dan diiringi dengan keinginan pengusaha untuk interaksi pengunjung agar ikut didalamnya. Keikutsertaan ini tentu dengan pengisian form tertentu dan jumlah form yang harus diisi tidaklah sedikit. Oleh karena itu syntax ini diperlukan. Itulah opini saya mengapa ini diadakan, tentunya yang bagi yang pernah membuat desain mengingatnya, apalagi ketika adanya perubahan.
contoh
#form:required {background-color:grey;}
#form:optional {background-color:yellow;}

E /attribute/F
Selector baru ini adalah untuk tambahan dari selector css2 yang penggunannya untuk mempermudah dalam pembuatan. Tambahannya adalah adanya slash atau garis miring diantara  elemen.
contoh
a:hover/ for / #div1 {background-color:grey;}
yang artinya ketika tautan pada elemen yang ber ID div1 disentuh mouse maka elemen div1 akan berbackground abu abu;

:nth-match(an+b) dan :nth-last-match(an+b)
mungkin yag pernah memahami nth-child hal ini bukanlah hal yang asing. Hanya saat penghitungan nth-last-match dihitung dari bawah terlebih dahulu.

E! > F
terlihat hampir sama dengan css3 selector tetapi disini adanya penambahan ahiran !, yang mana hal ini menjadi perubahan dari subjek pseudo-class ini
contoh
#div!>.div2 {background-color:blue;}

yang artinya mungkin sebagai berikut, setiap elemen yang ber id div yang mempunyai child / anakan yang mempunyai class div2 maka akan bewarna abu-abu. Disini yang bewarna abu abu adalah #div. Dan ini berbeda dengan #div>div2 pada css3.

:curent
:past
:future

sebagaimana :matches maka ini digunakan untuk menseleksi dari sebuah elemen yang berdasarkan dimensi waktu.waktu yang terjadi adalah lampu sekarang dan akan datang mungkin jika pada blogging adalah sebelum, sekarang , dan selanjutnya. Hal ini juga bisa saat masuk pada halaman video yaitu telah diputar, belum diputar dan sedang diputar.
contoh
:current (p,span){color:yellow;}
:past (p,span) {color:grey;}
:future (p,span) {color:blue;}

yang ingin dimaksudkan sesuai dari yang tertera diatas adalah  bahwa  video yang sekarang diputar huruf judulnya kuning, yang sudah diputar judulnya bewarna abu-abu. Dengan demikian maka yang belum diputar adalah bwarna biru.

:in-range
:out-of-range
hal ini digunakan untuk memasukan input saat diinginkan, tentunya adanya penentuan dari pemilik web dari range tersebut, oleh karena itu input dari pengujung bisa diterima atau tidak secara otomatis.
contoh

input:inrange{background-color:yelow;}
input:out-of-range {background:red;}

Mudah mengartikan dari code diatas jika sesuai atau masuk pada rangemaka background input akan bewarna kuning. Dan jika diluar range yang telah ditentukan maka akan bewarna merah pada background input tersebut.

:default
Pada saat tertentu jika ada suatu pilihan atau menu atau rangkaian tombol maka adanya suatu default pilihan tersebut. Misal adanya pilihan warna baju dari beberapa warna baju yang bermodelkan sama sebagai default untuk penampakan di halaman web.

div:default>img {border-color:red;}

Kira kira pengartiannya adalah semua div yang mempunyai child img dan sebagai default maka akan bewarna  merah pada bordernya.

:valid
:invalid

Dua syntax ini mengacu pada input atau form yang berguna untuk validasi nilai pengisian oleh pengunjung web. sehingga pengunjung diharapkan langsung mengetahui bahwa isiannya tidak sesuai settingan yag diinginkan tanpa terlebih dahulu dikirim ke database (yang jaman dulu diproses terlebih dahulu kemudian balik lagi karena salah). Misalnya untuk input nomer telepon yang seharusnya berawalan 62 xxx xxx bukan 0 xxx xxx

input:invalid {background-color:red}

bisa terlihat maksudnya bahwa jika salah memasukan input akan bewarna merah background nya sebelum nilainya dikirim ke database.

::value
::choices
::repeat-item
::repeat-index

::placeholder