Setelah kita mempraktek kan nya ada guna nya dulu kita memahami susunan selektor css beserta contoh dan penjelasana nya.
Tapi apa masih ada yang belum tau apa itu CSS kalo begitu yok kita pahami dulu apa itu CSS.
CSS adalah singkatan Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk menata gaya tampilan halaman web agar lebih baik dan indah saat kita tampilkan di website kita.
CSS hadir sebagai pelengkap HTML pastinya. yaa seperti kita tau HTML lebih fokus pada aspek pendefinisian konten, maka untuk membuat layout dan tata warna menjadi masalah pada pengkodean HTML, maka di kembangkanlah CSS yang untuk membagi atau memisahkan aspek konten dengan tampilan, Nah CSS difungsikanlah untuk menangani tata letak pada website kita, CSS juga sebuah halam web, lihat kode sumber halaman dan buka URL rujukan tag <link> yang akan mengarah ke sebuah file berektensi .CSS
Nah sudah paham bukan ? yok kita lihat daftar nya seperti apa sih CSS tersebut
Nah berikut kurang lebih daftar susunan selector css nya nah sembelum kita memulai gimana membuat css ada perlunya dulu agan memahami susunan selectornya ,
terima kasih
Tapi apa masih ada yang belum tau apa itu CSS kalo begitu yok kita pahami dulu apa itu CSS.
CSS adalah singkatan Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk menata gaya tampilan halaman web agar lebih baik dan indah saat kita tampilkan di website kita.
CSS hadir sebagai pelengkap HTML pastinya. yaa seperti kita tau HTML lebih fokus pada aspek pendefinisian konten, maka untuk membuat layout dan tata warna menjadi masalah pada pengkodean HTML, maka di kembangkanlah CSS yang untuk membagi atau memisahkan aspek konten dengan tampilan, Nah CSS difungsikanlah untuk menangani tata letak pada website kita, CSS juga sebuah halam web, lihat kode sumber halaman dan buka URL rujukan tag <link> yang akan mengarah ke sebuah file berektensi .CSS
Nah sudah paham bukan ? yok kita lihat daftar nya seperti apa sih CSS tersebut
| Susunan | Contoh selector | Berlaku di |
| Elemen | p | Semua Elemen |
| .class | .kotak | Semua Class .kotak |
| #id | #awal | Semua id #awal |
| * | * | Semua Elemen HTML |
| elemen, elemen | div, p | Semua elemen <div> dan <p> |
| elemen elemen | div p | Semua elemen <p> didalam elemen <div> |
| elemen > elemen | div > p | semua elemen<p> besarnya <div> |
| elemen + elemen | div + p | semua elemen <p> yang persis setelah <div> |
| elemen1 ~ elemen2 | p ~ ul | semua elemen <ul> diawali <p> |
| [atribut] | [target] | semua atribut gadget |
| [atribut=nilai] | [target=_blank] | semua elemen dengn targettarget=_blank |
| [atribut~=nilai] | [title~=sesuatu] | Semua Elemen beratribut title |
| [atribut|=nilai] | [lang|=id] | Semua Elemen beratribut dengan awal "id" |
| [atribut^=nilai] | a[href^="https"] | Elemen <a> yang href-nya awal https |
| [atribut$=nilai] | a[href$="pdf'] | semua elemen <a> href diakhiri nilai pdf |
| [atribut*=nilai] | a[href*="sesuatu" | Semua Elemen<a> yang atribut "sesuatu |
| :active | a:active | Semua link aktif |
| ::after | p::after | Semua Elemen <p> disispi setelahnya |
| ::before | p::before | Semua Elemen <p> disispi sbelumnya |
| :cheked | input:cheked | Semua Elemen <input> atribut cheked |
| :disable | input:disable | semua elemen <input> atribut disable |
| :empty | p:empty | Semua elemen <p> tdk memiliki anak |
| :enable | input:enable | Semua Elemen <p> atribut enable |
| :first-child | p:first-child | Semua Elemen <p> menjadi anak dari elemen utama |
| ::first-letter | p::first-letter | Semua Huruf pertama di elemen<p> |
| ::first-line | p::first-line | semua baris pertama di elemen <p> |
| :first-of-type | p:first-of-type | semua elemen <p> yang menjadi elemen <p> pertama |
| :focus | input:focus | Semua Elemen atribut fokus |
| :hover | a:hover | semua link saat di hover |
| :in-range | input:in-range | semua elemen input dgn nilai rage yg ditentukan |
| :invalid | input:invalid | Semua Elemen input dgn nilai invalid |
| :lang(bahasa) | p:lang(id) | Semua Elemen <p> dengan atribut lang bernilai id |
| :last-child | p:last-child | semua elemen <p> yg mnjadi terakhir elemen induk |
| :last-of-type | p:last-of-type | Semua Elemen <p> yg mjd elemen <p> trakhir induk |
| :link | a:link | Semualink yg blum dibuka |
| :not(selector) | :not(p) | Semua Elemen selain <p> |
| :nth-child(n) | p:nth-child(2) | Semua Elemen<p> yg mjd anak kedua elemen induk |
| :nth-last-child(n) | p:nth-last-child(2) | semua elemen <p> yg mjd anak kedua |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | semua elemen <p> yg mjd elemen<p> kedua dari induk |
| :nth-of-type(n) | p:nth-of-type(2) | Semua Elemen <p> yg mjd elemen <p> kedua dri induk |
| :only-of-type | p:only-of-type | semua elemen <p> yg mjd satu2 elemen <p> dri induk |
| :only-child | p:only-child | Semua Elemen <p> yg mjd satu2 nya anak dari elemen induk |
| :optional | input:optional | Semua Elemen input tnp atribut required |
| :out-of-range | input:out-of-range | elemen input dgn nilai luar range yg ditentukan |
| :read-only | input:read-only | Semua Elemen input dgn atribut readonly |
| :read-write | input:read-write | Semua Elemen input dgn atribut non readonly |
| :required | input:required | Semua Elemen input dengan atribut required |
| :root | :root | Elemen root di dokumen |
| :target | #awal:target | elemen #awal yg sedang aktif |
| :valid | input:valid | Semua Elemen input dgn nilai valid |
| :visited | a:visited | Semua link yang pernah dibuka |
Nah berikut kurang lebih daftar susunan selector css nya nah sembelum kita memulai gimana membuat css ada perlunya dulu agan memahami susunan selectornya ,
terima kasih
0 komentar