DEV Community: vrdhn

DEV Community: vrdhn The latest articles on DEV Community by vrdhn (@vrdhn). https://dev.to/vrdhn https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F820385%2Fdc92c449-7edc-4702-bef5-fe1aa59e05a3.png DEV Community: vrdhn https://dev.to/vrdhn en CSS Selector, by ChatGPT vrdhn Thu, 14 Aug 2025 05:55:00 +0000 https://dev.to/vrdhn/css-selector-by-chatgpt-1fkn https://dev.to/vrdhn/css-selector-by-chatgpt-1fkn <p>This has been generated by ChatGPT, and here for my reference.</p> <h1> 🧠 CSS Selectors Cheat Sheet </h1> <p>Organized by selector type with descriptions, examples, and performance tips.</p> <h2> 🟩 1. Simple Selectors </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Selector</th> <th>Description</th> <th>Example</th> <th>Matches</th> <th>Performance</th> </tr> </thead> <tbody> <tr> <td><code>*</code></td> <td>Universal selector</td> <td><code>*</code></td> <td>All elements</td> <td>🔴 Slow</td> </tr> <tr> <td><code>element</code></td> <td>Type selector</td> <td><code>div</code></td> <td>All <code><div></code> elements</td> <td>🟢 Fast</td> </tr> <tr> <td><code>#id</code></td> <td>ID selector</td> <td><code>#header</code></td> <td>Element with <code>id="header"</code> </td> <td>🟢 Fastest</td> </tr> <tr> <td><code>.class</code></td> <td>Class selector</td> <td><code>.btn</code></td> <td>Elements with class <code>btn</code> </td> <td>🟢 Fast</td> </tr> <tr> <td><code>[attr]</code></td> <td>Attribute present</td> <td><code>[disabled]</code></td> <td>Elements with that attribute</td> <td>🔴 Slow</td> </tr> <tr> <td><code>[attr=value]</code></td> <td>Attribute equals</td> <td><code>[type="text"]</code></td> <td>Attribute with exact value</td> <td>🟡 Moderate</td> </tr> </tbody> </table></div> <h2> 🟨 2. Combinator Selectors (Structural Relationships) </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Selector</th> <th>Description</th> <th>Example</th> <th>Matches</th> <th>Performance</th> </tr> </thead> <tbody> <tr> <td><code>A B</code></td> <td>Descendant</td> <td><code>div p</code></td> <td> <code><p></code> inside <code><div></code> (any depth)</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>A > B</code></td> <td>Child</td> <td><code>ul > li</code></td> <td>Direct child only</td> <td>🟢 Fast</td> </tr> <tr> <td><code>A + B</code></td> <td>Adjacent sibling</td> <td><code>h1 + p</code></td> <td>First <code><p></code> after <code><h1></code> </td> <td>🟢 Fast</td> </tr> <tr> <td><code>A ~ B</code></td> <td>General sibling</td> <td><code>h1 ~ p</code></td> <td>All <code><p></code> after <code><h1></code> </td> <td>🟡 Moderate</td> </tr> </tbody> </table></div> <h2> 🟪 3. Functional Pseudo-Classes </h2> <h3> Used for structural logic, conditions, and grouping. </h3> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Selector</th> <th>Description</th> <th>Example</th> <th>Matches</th> <th>Arguments</th> <th>Performance</th> </tr> </thead> <tbody> <tr> <td><code>:nth-child(n)</code></td> <td>Nth child (any type)</td> <td><code>li:nth-child(2n)</code></td> <td>Every 2nd <code><li></code> </td> <td> <code>n</code>, <code>even</code>, <code>odd</code>, <code>2n+1</code> etc.</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:nth-of-type(n)</code></td> <td>Nth child of same type</td> <td><code>p:nth-of-type(odd)</code></td> <td>Odd-numbered <code><p></code> elements</td> <td>Same as above</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:nth-last-child(n)</code></td> <td>Nth child from end</td> <td><code>li:nth-last-child(2)</code></td> <td>2nd-last <code><li></code> </td> <td>Same as above</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:nth-last-of-type(n)</code></td> <td>Nth of type from end</td> <td><code>p:nth-last-of-type(1)</code></td> <td>Last <code><p></code> among siblings</td> <td>Same as above</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:first-child</code></td> <td>First child of parent</td> <td><code>div:first-child</code></td> <td>If first child is a <code><div></code> </td> <td>—</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:last-child</code></td> <td>Last child of parent</td> <td><code>li:last-child</code></td> <td>If last child is a <code><li></code> </td> <td>—</td> <td>🟡 Moderate</td> </tr> <tr> <td><code>:not(selector)</code></td> <td>Exclude matches</td> <td><code>:not(.active)</code></td> <td>All except <code>.active</code> </td> <td>Any selector</td> <td>🔴 Slow</td> </tr> <tr> <td><code>:is(a, b)</code></td> <td>OR logic</td> <td><code>:is(h1, h2)</code></td> <td> <code>h1</code> or <code>h2</code> </td> <td>Comma-separated list</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:where(a, b)</code></td> <td>OR (zero specificity)</td> <td><code>:where(nav, aside)</code></td> <td>Like <code>:is</code>, but no specificity</td> <td>Comma-separated list</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:has(selector)</code></td> <td>Parent with matching child</td> <td><code>div:has(img)</code></td> <td> <code><div></code> with <code><img></code> inside</td> <td>Any selector</td> <td>🔴 Slow (limited)</td> </tr> </tbody> </table></div> <h2> 🔢 Special Arguments for <code>:nth-*</code> Functions </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Argument</th> <th>Meaning</th> <th>Matches</th> </tr> </thead> <tbody> <tr> <td><code>even</code></td> <td>Every even-numbered item</td> <td>2nd, 4th, 6th...</td> </tr> <tr> <td><code>odd</code></td> <td>Every odd-numbered item</td> <td>1st, 3rd, 5th...</td> </tr> <tr> <td><code>n</code></td> <td>All items (base pattern)</td> <td>0, 1, 2, 3...</td> </tr> <tr> <td><code>2n</code></td> <td>Every 2nd item</td> <td>2, 4, 6...</td> </tr> <tr> <td><code>2n+1</code></td> <td>Odd items</td> <td>Same as <code>odd</code> </td> </tr> <tr> <td><code>3n-1</code></td> <td>Custom pattern</td> <td>2, 5, 8...</td> </tr> </tbody> </table></div> <h2> 🟦 4. UI State Pseudo-Classes </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Selector</th> <th>Description</th> <th>Example</th> <th>Matches</th> <th>Performance</th> </tr> </thead> <tbody> <tr> <td><code>:hover</code></td> <td>On mouse hover</td> <td><code>a:hover</code></td> <td>Link when hovered</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:focus</code></td> <td>Element has focus</td> <td><code>input:focus</code></td> <td>Focused input</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:checked</code></td> <td>Checked input</td> <td><code>input:checked</code></td> <td>Checked checkbox or radio</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:disabled</code></td> <td>Disabled input/button</td> <td><code>button:disabled</code></td> <td>Disabled form controls</td> <td>🟢 Fast</td> </tr> <tr> <td><code>:empty</code></td> <td>No content</td> <td><code>div:empty</code></td> <td>Elements with no children or text</td> <td>🟡 Moderate</td> </tr> </tbody> </table></div> <h2> 🟥 5. Pseudo-Elements </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Selector</th> <th>Description</th> <th>Example</th> <th>Matches</th> <th>Performance</th> </tr> </thead> <tbody> <tr> <td><code>::before</code></td> <td>Insert content before</td> <td><code>p::before</code></td> <td>Virtual content before</td> <td>🟢 Fast</td> </tr> <tr> <td><code>::after</code></td> <td>Insert content after</td> <td><code>p::after</code></td> <td>Virtual content after</td> <td>🟢 Fast</td> </tr> <tr> <td><code>::marker</code></td> <td>List marker</td> <td><code>li::marker</code></td> <td>Bullet/number styling</td> <td>🟢 Fast</td> </tr> <tr> <td><code>::placeholder</code></td> <td>Input placeholder style</td> <td><code>input::placeholder</code></td> <td>Placeholder text</td> <td>🟢 Fast</td> </tr> </tbody> </table></div> <h2> 📌 Summary </h2> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Category</th> <th>Includes</th> </tr> </thead> <tbody> <tr> <td>🟩 Simple Selectors</td> <td> <code>*</code>, <code>element</code>, <code>.class</code>, <code>#id</code>, <code>[attr]</code> </td> </tr> <tr> <td>🟨 Combinators</td> <td>Descendant, Child, Siblings</td> </tr> <tr> <td>🟪 Functional Pseudo-classes</td> <td> <code>:nth-*</code>, <code>:not()</code>, <code>:is()</code>, <code>:has()</code> </td> </tr> <tr> <td>🔢 Special Arguments</td> <td> <code>even</code>, <code>odd</code>, <code>n</code>, <code>2n</code>, <code>3n-1</code> </td> </tr> <tr> <td>🟦 UI State</td> <td> <code>:hover</code>, <code>:focus</code>, <code>:checked</code>, etc.</td> </tr> <tr> <td>🟥 Pseudo-elements</td> <td> <code>::before</code>, <code>::after</code>, <code>::placeholder</code> </td> </tr> </tbody> </table></div>