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:

1. Di platform mana tutorial itu dipublikasikan? Apakah fokusnya pada programming atau tidak?
2. Apakah materinya terstruktur dengan baik?
3. Apakah materi tersebut seimbang antara teori dan praktik?
4. Kapan tutorial tersebut dibuat? Apakah materinya masih relevan dan up-to-date?
5. 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

<h1>Styling by Universal Selector</h1>
<h2>Styling by Universal Selector</h2>
<h3>Styling by Universal Selector</h3>

* {
    color: red;
}

Type Selector

<h1>Styling by Type</h1>
<h2>Styling by Type</h2>
<h3>Styling by Type</h3>

h1 {
    color: red;
}

h2 {
    color: yellow;
}

h3 {
    color: green;
}

ID Selector

<h1 id="tagline">Styling by ID</h1>

#tagline {
    color: purple;
}

Class Selector

<h1 class="tagline">Styling by Class</h1>

.tagline {
    color: cyan;
}

Attribute Selector

<h1 data-variant="tagline">Styling by Attribute</h1>

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

Pseudo-class Selector

<h1>Styling by Pseudo-class :hover</h1>

h1:hover {
    color: brown;
}

Pseudo-element Selector

<h1>Styling by Pseudo-element ::selection</h1>

h1::selection {
    color: silver;
}

:is() Selector

<div>
    <h1>Styling by :is()</h1>
    <h2>Styling by :is()</h2>
    <h3>Lorem Ipsum</h3>
</div>

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

:not() Selector

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

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

:where() Selector

<div>
    <h1>Styling by :where()</h1>
    <h2>Styling by :where()</h2>
    <h3>Lorem Ipsum</h3>
</div>

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

:has() Selector

<h1>Styling by <span>:has()</span></h1>
<h1>Lorem Ipsum</h1>

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

---

Combinator & Separator

1. Descendent Combinator

<main>
    <h1>Styling by Descendant Selector</h1>
    <section>
        <h1>Styling by Descendant Selector</h1>
        <h2>Lorem Ipsum</h2>
        <h3>Lorem Ipsum</h3>
    </section>
</main>

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

2. Child Combinator >

<main>
    <h1>Styling by Child Selector</h1>
    <section>
        <h1>Lorem Ipsum</h1>
        <h2>Lorem Ipsum</h2>
        <h3>Lorem Ipsum</h3>
    </section>
</main>

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

3. Next-sibling Combinator +

<main>
    <h1>Lorem Ipsum</h1>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>Styling by Next-sibling Selector</p>
        <p>Lorem Ipsum</p>
    </section>
</main>

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

4. Subsequent-sibling Combinator ~

<main>
    <h1>Lorem Ipsum</h1>
    <section>
        <h1>Lorem Ipsum</h1>
        <p>Styling by Subsequent-sibling Selector</p>
        <p>Styling by Subsequent-sibling Selector</p>
    </section>
</main>

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

5. Selector List ,

<main>
    <h1>Styling by Selector List</h1>
    <section>
        <h1>Styling by Selector List</h1>
        <h2>Styling by Selector List</h2>
        <h3>Styling by Selector List</h3>
    </section>
</main>

/* Hanya <h1> yang langsung berada dalam <main> */
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 👋