CSS Tutorial

CSS Pseudo-class

Last modified on: October 21, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="c7b1c16a-aca2-4d8e-971b-3e1fb6f313f9" data-message-model-slug="gpt-4o">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>CSS Pseudo-classes: Applying Styles Based on Element States</h3>
<p>A <strong>pseudo-class</strong> is a keyword added to a CSS selector that specifies a special state of the selected element. Pseudo-classes allow you to style elements dynamically, such as when a user hovers over an element, when a link is visited, or when an input field is focused.</p>
<h4>Syntax</h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">css</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-css"><code>selector:pseudo-class {
    /* styles */
}
</code></pre>
</div>
</div>
</div>
</div>
<p>Common pseudo-classes include <code>:hover</code>, <code>:active</code>, <code>:focus</code>, and many more.</p>
<hr />
<h3>Popular CSS Pseudo-classes</h3>
<hr />
<h3>1. <strong><code>:hover</code></strong> &ndash; Hovering over an Element</h3>
<p>The <code>:hover</code> pseudo-class applies when the user hovers over an element, typically used for interactive elements like links or buttons.</p>
<h4>Example: <code>:hover</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Hover Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        a:hover {
            color: red;
            text-decoration: underline;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="#"&gt;Hover over this link&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>a:hover</code>: When the user hovers over the link, it changes the text color to red and underlines the text.</li>
</ul>
<hr />
<h3>2. <strong><code>:active</code></strong> &ndash; Active Element</h3>
<p>The <code>:active</code> pseudo-class applies to an element at the moment it is being activated, such as when a button is clicked or a link is being pressed.</p>
<h4>Example: <code>:active</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Active Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        a:active {
            color: blue;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="#"&gt;Click this link&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>a:active</code>: When the user clicks (activates) the link, the text color changes to blue.</li>
</ul>
<hr />
<h3>3. <strong><code>:focus</code></strong> &ndash; Focused Element</h3>
<p>The <code>:focus</code> pseudo-class applies when an element (usually a form input) receives focus, typically when a user clicks inside a text field or navigates to it using the keyboard.</p>
<h4>Example: <code>:focus</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Focus Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        input:focus {
            border-color: green;
            outline: none;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input type="text" placeholder="Click here to focus"&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>input:focus</code>: When the input field is focused (clicked or tabbed into), the border color changes to green, and the default outline is removed.</li>
</ul>
<hr />
<h3>4. <strong><code>:visited</code></strong> &ndash; Visited Links</h3>
<p>The <code>:visited</code> pseudo-class applies to links that the user has already visited.</p>
<h4>Example: <code>:visited</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Visited Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        a:visited {
            color: purple;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="https://example.com"&gt;Visit Example&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>a:visited</code>: When the link to "example.com" has been visited by the user, the link color changes to purple.</li>
</ul>
<hr />
<h3>5. <strong><code>:nth-child()</code></strong> &ndash; Selecting Elements Based on Their Position</h3>
<p>The <code>:nth-child()</code> pseudo-class selects elements based on their position in a parent container. You can specify the exact child index or use patterns like <code>odd</code> or <code>even</code>.</p>
<h4>Example: <code>:nth-child()</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Nth-child Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        li:nth-child(odd) {
            background-color: #f0f0f0;
        }

li:nth-child(even) {
            background-color: #e0e0e0;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
        &lt;li&gt;Item 4&lt;/li&gt;
        &lt;li&gt;Item 5&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>li:nth-child(odd)</code>: Selects the odd-numbered list items and applies a light gray background.</li>
<li><code>li:nth-child(even)</code>: Selects the even-numbered list items and applies a slightly darker gray background.</li>
</ul>
<hr />
<h3>6. <strong><code>:first-child</code> and <code>:last-child</code></strong> &ndash; Selecting First and Last Elements</h3>
<p>The <code>:first-child</code> pseudo-class selects the first child element of a parent, while <code>:last-child</code> selects the last child element.</p>
<h4>Example: <code>:first-child</code> and <code>:last-child</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;First and Last Child&lt;/title&gt;
    &lt;style&gt;
        li:first-child {
            color: green;
        }

li:last-child {
            color: red;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;ul&gt;
        &lt;li&gt;First item&lt;/li&gt;
        &lt;li&gt;Middle item&lt;/li&gt;
        &lt;li&gt;Last item&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>li:first-child</code>: The first list item will be styled with green text.</li>
<li><code>li:last-child</code>: The last list item will be styled with red text.</li>
</ul>
<hr />
<h3>7. <strong><code>:not()</code></strong> &ndash; Excluding Elements</h3>
<p>The <code>:not()</code> pseudo-class selects all elements except the ones that match the selector inside <code>:not()</code>.</p>
<h4>Example: <code>:not()</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Not Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        li:not(.highlight) {
            color: gray;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;ul&gt;
        &lt;li class="highlight"&gt;This item is highlighted&lt;/li&gt;
        &lt;li&gt;This item is not highlighted&lt;/li&gt;
        &lt;li&gt;This item is not highlighted either&lt;/li&gt;
    &lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>li:not(.highlight)</code>: Styles all <code>&lt;li&gt;</code> elements that do not have the class <code>highlight</code>.</li>
</ul>
<hr />
<h3>8. <strong><code>:nth-of-type()</code></strong> &ndash; Selecting Based on Element Type</h3>
<p>The <code>:nth-of-type()</code> pseudo-class selects elements based on their type, similar to <code>:nth-child()</code>, but only for elements of the same type.</p>
<h4>Example: <code>:nth-of-type()</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Nth-of-type Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        p:nth-of-type(2) {
            color: blue;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;First paragraph.&lt;/p&gt;
    &lt;p&gt;Second paragraph (this will be blue).&lt;/p&gt;
    &lt;p&gt;Third paragraph.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>p:nth-of-type(2)</code>: Selects the second <code>&lt;p&gt;</code> element regardless of its parent, and applies the specified styles.</li>
</ul>
<hr />
<h3>9. <strong><code>:checked</code></strong> &ndash; Selecting Checked Inputs</h3>
<p>The <code>:checked</code> pseudo-class applies to checkboxes or radio buttons that are selected or checked.</p>
<h4>Example: <code>:checked</code></h4>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Checked Pseudo-class&lt;/title&gt;
    &lt;style&gt;
        input:checked {
            background-color: yellow;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;label&gt;
        &lt;input type="checkbox"&gt; Checkbox 1
    &lt;/label&gt;
    &lt;label&gt;
        &lt;input type="checkbox" checked&gt; Checkbox 2 (checked)
    &lt;/label&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h5>Explanation:</h5>
<ul>
<li><code>input:checked</code>: Applies styles to <code>&lt;input&gt;</code> elements that are checked.</li>
</ul>
<hr />
<h3>Conclusion</h3>
<p>CSS pseudo-classes enable dynamic styling of elements based on their state or position within the document. Whether you're targeting user interactions like <code>:hover</code></p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More