Menyegarkan Mental dengan Fundamental

Problem: Otodidak tanpa doc akan mentok Sering kali, saya menemui programmer pemula yang hanya mengandalkan materi dari satu sumber otodidak dan tidak memanfaatkan dokumentasi resmi sama sekali. Sebagai pemula, sah-sah saja bergantung pada sumber otodidak, tetapi ini dapat menyebabkan pemahaman kamu terbatas pada materi yang itu-itu saja. Ada beberapa pertimbangan yang perlu kamu perhatikan saat memilih sumber otodidak: Di platform mana tutorial itu dipublikasikan? Apakah fokusnya pada programming atau tidak? Apakah materinya terstruktur dengan baik? Apakah materi tersebut seimbang antara teori dan praktik? Kapan tutorial tersebut dibuat? Apakah materinya masih relevan dan up-to-date? Siapa yang membuat tutorial tersebut? Apakah pematerinya memiliki kredibilitas yang baik? Untuk mengatasi kekurangan-kekurangan di atas, salah satu cara terbaik adalah mengulang materi dengan mengacu pada dokumentasi resmi. Dan itulah yang akan kita bahas di artikel ini. Dokumentasi Resmi W3C MDN: CSS Selectors Meskipun dokumentasi resmi selector ada di W3C, saya pribadi merasa kurang nyaman membaca dokumentasinya. Oleh karena itu, saya lebih menyarankan untuk merujuk ke dokumentasi versi MDN yang lebih mudah dipahami. Penampakan Selector Universal Selector Styling by Universal Selector Styling by Universal Selector Styling by Universal Selector * { color: red; } Type Selector Styling by Type Styling by Type Styling by Type h1 { color: red; } h2 { color: yellow; } h3 { color: green; } ID Selector Styling by ID #tagline { color: purple; } Class Selector Styling by Class .tagline { color: cyan; } Attribute Selector Styling by Attribute [data-variant="tagline"] { color: orange; } Pseudo-class Selector Styling by Pseudo-class :hover h1:hover { color: brown; } Pseudo-element Selector Styling by Pseudo-element ::selection h1::selection { color: silver; } :is() Selector Styling by :is() Styling by :is() Lorem Ipsum div :is(h1, h2) { color: gold; } :not() Selector Styling by :not() Lorem Ipsum h1:not(.tagline) { color: indigo; } :where() Selector Styling by :where() Styling by :where() Lorem Ipsum div :where(h1, h2) { color: gold; } :has() Selector Styling by :has() Lorem Ipsum h1:has(span) { color: violet; } Combinator & Separator 1. Descendent Combinator Styling by Descendant Selector Styling by Descendant Selector Lorem Ipsum Lorem Ipsum /* Semua di dalam , meskipun bersarang / main h1 { color: magenta; } 2. Child Combinator > Styling by Child Selector Lorem Ipsum Lorem Ipsum Lorem Ipsum / Hanya yang langsung berada dalam / main > h1 { color: magenta; } 3. Next-sibling Combinator + Lorem Ipsum Lorem Ipsum Styling by Next-sibling Selector Lorem Ipsum / yang TEPAT setelah (saudara kandung langsung) / h1 + p { color: darkred; } 4. Subsequent-sibling Combinator ~ Lorem Ipsum Lorem Ipsum Styling by Subsequent-sibling Selector Styling by Subsequent-sibling Selector / SEMUA yang saudara kandung dari / h1 ~ p { color: darkred; } 5. Selector List , Styling by Selector List Styling by Selector List Styling by Selector List Styling by Selector List / Hanya yang langsung berada dalam / h1, h2, h3 { color: lime; } 6. Namespace separator | 7. Column Combinator || (Experimental) Struktur Selector 1. Simple Selector Simple selector adalah selector dasar tanpa selector lain, combinator, atau separator. / Simple selector: type / p {...} / Simple selector: class / .title {...} / Simple selector: id / #header {...} / Simple selector: attribute / [disabled] {...} / Simple selector: universal selector / {...} 2. Compound Selector Compound selector adalah gabungan dari simple selector tanpa combinator atau selector. button.primary:hover {...} input[type="email"].required:focus {...} 3. Complex Selector || Combinator Selector Complex Selector adalah selector yang memiliki combinator. main > h1 {...} form:has(input[type="checkbox"]:checked) button[type="submit"] {...} 4. List Selector || Group Selector List Selector adalah beberapa selector yang dipisah Selector List , h1, h2, h3 {...} input[type="

May 7, 2025 - 14:27

Problem: Otodidak tanpa doc akan mentok

Sering kali, saya menemui programmer pemula yang hanya mengandalkan materi dari satu sumber otodidak dan tidak memanfaatkan dokumentasi resmi sama sekali. Sebagai pemula, sah-sah saja bergantung pada sumber otodidak, tetapi ini dapat menyebabkan pemahaman kamu terbatas pada materi yang itu-itu saja. Ada beberapa pertimbangan yang perlu kamu perhatikan saat memilih sumber otodidak:

Di platform mana tutorial itu dipublikasikan? Apakah fokusnya pada programming atau tidak?
Apakah materinya terstruktur dengan baik?
Apakah materi tersebut seimbang antara teori dan praktik?
Kapan tutorial tersebut dibuat? Apakah materinya masih relevan dan up-to-date?
Siapa yang membuat tutorial tersebut? Apakah pematerinya memiliki kredibilitas yang baik?

Untuk mengatasi kekurangan-kekurangan di atas, salah satu cara terbaik adalah mengulang materi dengan mengacu pada dokumentasi resmi. Dan itulah yang akan kita bahas di artikel ini.

Dokumentasi Resmi

Meskipun dokumentasi resmi selector ada di W3C, saya pribadi merasa kurang nyaman membaca dokumentasinya. Oleh karena itu, saya lebih menyarankan untuk merujuk ke dokumentasi versi MDN yang lebih mudah dipahami.

Penampakan Selector

Universal Selector

Styling by Universal Selector
Styling by Universal Selector
Styling by Universal Selector

* {
    color: red;
}

Type Selector

Styling by Type
Styling by Type
Styling by Type

h1 {
    color: red;
}

h2 {
    color: yellow;
}

h3 {
    color: green;
}

ID Selector

 id="tagline">Styling by ID

#tagline {
    color: purple;
}

Class Selector

 class="tagline">Styling by Class

.tagline {
    color: cyan;
}

Attribute Selector

 data-variant="tagline">Styling by Attribute

[data-variant="tagline"] {
    color: orange;
}

Pseudo-class Selector

Styling by Pseudo-class :hover

h1:hover {
    color: brown;
}

Pseudo-element Selector

Styling by Pseudo-element ::selection

h1::selection {
    color: silver;
}

:is() Selector


    Styling by :is()
    Styling by :is()
    Lorem Ipsum

div :is(h1, h2) {
    color: gold;
}

:not() Selector

Styling by :not()
 class="tagline">Lorem Ipsum

h1:not(.tagline) {
    color: indigo;
}

:where() Selector


    Styling by :where()
    Styling by :where()
    Lorem Ipsum

div :where(h1, h2) {
    color: gold;
}

:has() Selector

Styling by :has()
Lorem Ipsum

h1:has(span) {
    color: violet;
}

Combinator & Separator

1. Descendent Combinator


    Styling by Descendant Selector
    
        Styling by Descendant Selector
        Lorem Ipsum
        Lorem Ipsum

/* Semua  di dalam , meskipun bersarang */
main h1 {
    color: magenta;
}

2. Child Combinator `>`


    Styling by Child Selector
    
        Lorem Ipsum
        Lorem Ipsum
        Lorem Ipsum

/* Hanya  yang langsung berada dalam  */
main > h1 {
    color: magenta;
}

3. Next-sibling Combinator `+`


    Lorem Ipsum
    
        Lorem Ipsum
        Styling by Next-sibling Selector
        
Lorem Ipsum

/*  yang TEPAT setelah  (saudara kandung langsung) */
h1 + p {
    color: darkred;
}

4. Subsequent-sibling Combinator `~`


    Lorem Ipsum
    
        Lorem Ipsum
        Styling by Subsequent-sibling Selector
        
Styling by Subsequent-sibling Selector

/* SEMUA  yang saudara kandung dari  */
h1 ~ p {
    color: darkred;
}

5. Selector List `,`


    Styling by Selector List
    
        Styling by Selector List
        Styling by Selector List
        Styling by Selector List

/* Hanya  yang langsung berada dalam  */
h1, h2, h3 {
    color: lime;
}

6. Namespace separator `|`

7. Column Combinator `||` (Experimental)

Struktur Selector

1. Simple Selector

Simple selector adalah selector dasar tanpa selector lain, combinator, atau separator.

/* Simple selector: type */
p {...}

/* Simple selector: class */
.title {...}

/* Simple selector: id */
#header {...}

/* Simple selector: attribute */
[disabled] {...}

/* Simple selector: universal selector */
* {...}

2. Compound Selector

Compound selector adalah gabungan dari simple selector tanpa combinator atau selector.

button.primary:hover {...}

input[type="email"].required:focus {...}

3. Complex Selector || Combinator Selector

Complex Selector adalah selector yang memiliki combinator.

main > h1 {...}

form:has(input[type="checkbox"]:checked) button[type="submit"] {...}

4. List Selector || Group Selector

List Selector adalah beberapa selector yang dipisah Selector List ,

h1, h2, h3 {...}

input[type="text"], input[type="email"], textarea {...}

Kalau ada yang ingin ditanyakan, silakan komen di bawah ya, saya siap membantu. Sampai jumpa di tulisan selanjutnya