How to select HTML element without attribute with CSS?

There might be cases, where You want to select element that does not have particular attribute. Not have attribute might actually mean two different aspects. One could consider empty attribute like if it not exists, while other would said that the element have attribute but empty. We will focus here on case where we treat both empty or non existent attribute as non existent.

The use case here is to select all bare links, in other words those links that do not have any CSS class applied. To select those elements, we need to use attribute selector twice, once assuming empty content and the other one assuming no attribute at all. To select elements without attribute we can use not selector extension while for empty attribute attribute just CSS attribute selector with empty value.

Example

Selecting all a elements that do not have CSS class applied:

The first selector selects all a elements that do not have class attribute, the latter one selects all with empty class attribute. The same technique can be used to select any other elements with empty attribute.

The selector will match for example:

Selecting Elements That Don’t Have Particular Attribute or Have It Empty

As in class example we need to combine not attribute selector with empty attribute selector:

This will match any div element without (or empty) id attribute:

But will not match if element have any value on id attribute:

Selecting Elements That Don’t Have Particular Attribute

The slightly different case is when selecting element that do not have attribute. The empty value means that attribute is empty but it still exists. To select such elements we will use only not operator.

For example let’s use data-name custom attribute selector:

This will match elements that do not have data-name attribute:

But it will not match those which have empty data-name attribute:

Источник

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

I would like to write a CSS selector rule that selects all elements that don’t have a certain class. For example, given the following HTML:

  
Example
 Print me! 
This page is super interresting and you should print it!
   

I would like to write a selector that selects all elements that don’t have the «printable» class which, in this case, are the nav and a elements. Is this possible? NOTE: in the actual HTML where I would like to use this, there are going to be a lot more elements that don’t have the «printable» class than do (I realize it’s the other way around in the above example).

10 Answers 10

Typically you add a class selector to the :not() pseudo-class like so:

:not(.printable) < /* Styles */ >:not([attribute]) < /* Styles */ >

But if you need better browser support (IE8 and older don’t support :not() ), you’re probably better off creating style rules for elements that do have the «printable» class. If even that isn’t feasible despite what you say about your actual markup, you may have to work your markup around that limitation.

Keep in mind that, depending on the properties you’re setting in this rule, some of them may either be inherited by descendants that are .printable , or otherwise affect them one way or another. For example, although display is not inherited, setting display: none on a :not(.printable) will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.

Источник

Attribute selectors

The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.

The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case insensitive, as are spec-defined enumerated values. The case-insensitive HTML attribute values are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.

If the attribute value is case sensitive, like class , id , and data-* attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like role and aria-* attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier ( i ).

Syntax

Represents elements with an attribute name of attr.

Represents elements with an attribute name of attr whose value is exactly value.

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, — (U+002D). It is often used for language subcode matches.

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

Adding an i (or I ) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

[attr operator value s] Experimental

Adding an s (or S ) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Examples

Links

CSS

a  color: blue; > /* Internal links, beginning with "#" */ a[href^="#"]  background-color: gold; > /* Links with "example" anywhere in the URL */ a[href*="example"]  background-color: silver; > /* Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i]  color: cyan; > /* Links with "cAsE" anywhere in the URL, with matching capitalization */ a[href*="cAsE" s]  color: pink; > /* Links that end in ".org" */ a[href$=".org"]  color: red; > /* Links that start with "https://" and end in ".org" */ a[href^="https://"][href$=".org"]  color: green; > 

HTML

ul> li>a href="#internal">Internal linka>li> li>a href="http://example.com">Example linka>li> li>a href="#InSensitive">Insensitive internal linka>li> li>a href="http://example.org">Example org linka>li> li>a href="https://example.org">Example https org linka>li> ul> 

Result

Languages

CSS

/* All divs with a `lang` attribute are bold. */ div[lang]  font-weight: bold; > /* All divs without a `lang` attribute are italicized. */ div:not([lang])  font-style: italic; > /* All divs in US English are blue. */ div[lang~="en-us"]  color: blue; > /* All divs in Portuguese are green. */ div[lang="pt"]  color: green; > /* All divs in Chinese are red, whether simplified (zh-Hans-CN) or traditional (zh-Hant-TW). */ div[lang|="zh"]  color: red; > /* All divs with a Traditional Chinese `data-lang` are purple. */ /* Note: You could also use hyphenated attributes without double quotes */ div[data-lang="zh-Hant-TW"]  color: purple; > 

HTML

div lang="en-us en-gb en-au en-nz">Hello World!div> div lang="pt">Olá Mundo!div> div lang="zh-Hans-CN">世界您好！div> div lang="zh-Hant-TW">世界您好！div> div data-lang="zh-Hant-TW">世界您好！div> 

Result

HTML ordered lists

The HTML specification requires the type attribute to be matched case-insensitively because it is primarily used in the element. Note that if a modifier is not supported by the user agent, then the selector will not match.

CSS

/* Case-sensitivity depends on document language */ ol[type="a"]  list-style-type: lower-alpha; background: red; > ol[type="b" s]  list-style-type: lower-alpha; background: lime; > ol[type="B" s]  list-style-type: upper-alpha; background: grey; > ol[type="c" i]  list-style-type: upper-alpha; background: green; > 

HTML

ol type="A"> li> Red background for case-insensitive matching (default for the type selector) li> ol> ol type="b"> li>Lime background if `s` modifier is supported (case-sensitive match)li> ol> ol type="B"> li>Grey background if `s` modifier is supported (case-sensitive match)li> ol> ol type="C"> li> Green background if `i` modifier is supported (case-insensitive match) li> ol> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• attr()
• Selecting a single element: Document.querySelector() , DocumentFragment.querySelector() , or Element.querySelector()
• Selecting all matching elements: Document.querySelectorAll() , DocumentFragment.querySelectorAll() , or Element.querySelectorAll()
• Case-insensitive attribute selector values on WHATWG

Found a content problem with this page?

This page was last modified on Jun 29, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS attribute selector for existing but non-empty attributes

Is there a CSS selector that applies to non-empty attributes? Using :not([Data-Attribute=»]) matches if the attribute is non-existing, too. I’m looking for something like [Data-Attribute!=»] .

It wouldn’t be similar to [Data-Attribute!=»] if you’re talking about the jQuery selector, because the jQuery selector is equivalent to :not([Data-Attribute=»]) and does match if the attribute is not specified.

3 Answers 3

 [Data-Attribute]:not([Data-Attribute=""]) 

@Sven The only solution on that link that answers this question (select a specific data attribute that is not empty) is identical to this answer.

Yup, the solution provided here targets what he needs, the one in the link above requires counter-styling.

If you prefer a sass/scss solution:

/** * Requires */ @use "sass:meta"; /** * Select current scope only if a given attribute is set * @param $attribute - Attribute name, default: 'class' * @param $empty - Allow empty attribute * @param $error - Error message prefix * @output Wraps given content styles to apply only if the current scope element has the given attribute */ @mixin attr-isset($attribute: 'class', $empty: false, $error: 'attr-isset::') < @if meta.content-exists() != true < @error '#@content is required'; > @if $empty < &[#] < @content; >> @else < &[#]:not([#='']) < @content; >> > 

Источник