CSS Tutorial

CSS Attr Selectors

Last modified on: October 25, 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">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">CSS Attribute Selectors: Styling Based on HTML Attributes</h2>
</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="40406a19-7eec-4a61-aed9-6d5036e2c4c5" 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">
<p>CSS attribute selectors allow you to target HTML elements based on the presence, value, or partial match of an attribute. This is especially helpful for applying styles dynamically based on attributes like <code>id</code>, <code>class</code>, <code>type</code>, <code>href</code>, and <code>data-*</code> attributes.</p>
<hr />
<h3>Basic Syntax of CSS Attribute Selectors</h3>
<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>element[attribute]          /* Selects elements with the specified attribute */
element[attribute="value"]   /* Selects elements with an exact attribute value */
element[attribute~="value"]  /* Selects elements with a whitespace-separated value */
element[attribute|="value"]  /* Selects elements with a value beginning with a specified prefix */
element[attribute^="value"]  /* Selects elements with a value starting with the specified substring */
element[attribute$="value"]  /* Selects elements with a value ending with the specified substring */
element[attribute*="value"]  /* Selects elements with a value containing the specified substring */
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Example 1: Styling Based on Attribute Presence</h3>
<p>You can style elements that contain a specific attribute, regardless of its value.</p>
<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;CSS Attribute Selectors&lt;/title&gt;
    &lt;style&gt;
        /* Select all links with an href attribute */
        a[href] {
            color: blue;
            font-weight: bold;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="https://example.com"&gt;Link with href&lt;/a&gt;
    &lt;a&gt;No href attribute&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>In this example, only the link with an <code>href</code> attribute is styled, as it matches the selector <code>a[href]</code>.</p>
<hr />
<h3>Example 2: Exact Value Match</h3>
<p>Use the attribute selector to target elements with a specific attribute value.</p>
<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;CSS Attribute Selectors&lt;/title&gt;
    &lt;style&gt;
        /* Select input elements with type="text" */
        input[type="text"] {
            border: 2px solid blue;
            padding: 5px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;input type="text" placeholder="Text input"&gt;
    &lt;input type="password" placeholder="Password input"&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, only the input field with <code>type="text"</code> will have a blue border. The selector <code>input[type="text"]</code> applies styles to elements with that specific attribute value.</p>
<hr />
<h3>Example 3: Partial Match with Substring Selectors</h3>
<p>CSS allows you to target elements based on part of an attribute&rsquo;s value, which is useful when attributes contain common text.</p>
<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;CSS Attribute Selectors&lt;/title&gt;
    &lt;style&gt;
        /* Starts with "https" */
        a[href^="https"] {
            color: green;
        }

/* Ends with ".pdf" */
        a[href$=".pdf"] {
            color: red;
        }

/* Contains "example" */
        a[href*="example"] {
            font-style: italic;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;a href="https://example.com"&gt;Secure Link&lt;/a&gt;
    &lt;a href="https://another.com"&gt;Another Link&lt;/a&gt;
    &lt;a href="https://example.com/file.pdf"&gt;PDF Document&lt;/a&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong><code>a[href^="https"]</code></strong>: Selects links that start with "https".</li>
<li><strong><code>a[href$=".pdf"]</code></strong>: Selects links ending in ".pdf".</li>
<li><strong><code>a[href*="example"]</code></strong>: Selects links containing "example" anywhere in the URL.</li>
</ul>
<hr />
<h3>Example 4: Styling Data Attributes</h3>
<p>Data attributes (<code>data-*</code>) can be used to store custom information and styled using attribute selectors.</p>
<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;CSS Data Attribute Selectors&lt;/title&gt;
    &lt;style&gt;
        /* Select elements with a data-role attribute of "admin" */
        [data-role="admin"] {
            color: purple;
            font-weight: bold;
        }

/* Select elements with any data-role attribute */
        [data-role] {
            border-bottom: 1px dashed gray;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div data-role="admin"&gt;Admin User&lt;/div&gt;
    &lt;div data-role="user"&gt;Regular User&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Here, the selector <code>[data-role="admin"]</code> targets elements with the exact <code>data-role</code> value "admin", while <code>[data-role]</code> applies to any element with a <code>data-role</code> attribute.</p>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More