CSS Attribute Selector for Non-Empty Attributes

CSS attribute selector for non-empty attributes

try this

<style>
    [Data-Attribute]:not([Data-Attribute=""])
    {
        background-color: Red;
    }
</style>

Select elements where attribute is non-empty

This works, if you don't mind doing things slightly backwards and you need it to work in browsers that don't support :not:

div[data-pid] {
    color: green;
}

div[data-pid=""] {
    color: inherit;
}

That will make all the divs with non-empty data-pids green.

Fiddle here: http://jsfiddle.net/ZuSRM/

How to create css selector that target element with attr that not empty

button[data-state]:not([data-state=""]) {

  background-color: red;

}

<button id=1 class=notify data-state> some text </button>

<button id=2 class=notify data-state="downloading"> some text </button>

<button id=3 class=notify data-state="render"> some text </button>

CSS3 selector for attribute that is has ANY value and is not null or blank

[data-group-id]:not([data-group-id=""])

This will select an element that has the attribute, as long as it is not blank.

Can't find a not equal css attribute selector

Use the code like this:

div[foo]:not([foo=''])
{
    /* CSS Applied to divs having foo value Not nothing (or having a foo value assigned) */
}

css selector to match an element without attribute x

:not selector:

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

Support: in Internet Explorer 9 and higher

CSS selector to check that attribute does not contain both values

As you mentioned, you want something equivalent to :not([style*='display'][style*='none']), which is invalid in CSS, since :not() allows no combined selectors.

The laws of logic help us out here. Remember that !(a AND b) == !a OR !b, so we can write

:not([style*='display']), :not([style*='none'])

since in CSS, a, b matches elements that satisfy selector a OR selector b.

Again, as said in the question, this does not take the order of the words into consideration. The latter is impossible in CSS, since none of the CSS attribute selectors consider word order.

Target elements without *any* attributes?

A selector that matches a tag without attributes doesn't currently exist.

I read through the latest CSS selector reference and couldn't find a selector that does what you wish.

You can't use an asterisk in the attribute selector to select everything unfortunately. These two railroad diagrams represent what is allowed:

So your first two attempts are invalid, and the valid empty string seems to have no effect:

[] {
  color: blue;
}

[*] {
  color: red;
}

[""] { /* Seems to select nothing, rather than 'no attribute' */
  color: magenta;
}

<p>Clean element with no attributes</p>
<p class="has-class">Has class attribute</p>
<p id="has-id">Has ID attribute</p>
<p data-has-data-attribute="">Has data attribute</p>

:not(:empty) CSS selector is not working?

Being a void element, an <input> element is considered empty by the HTML definition of "empty", since the content model of all void elements is always empty. So they will always match the :empty pseudo-class, whether or not they have a value. This is also why their value is represented by an attribute in the start tag, rather than text content within start and end tags.

Also, from the Selectors spec:

The :empty pseudo-class represents an element that has no children at all. In terms of the document tree, only element nodes and content nodes (such as DOM text nodes, CDATA nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness;

Consequently, input:not(:empty) will never match anything in a proper HTML document. (It would still work in a hypothetical XML document that defines an <input> element that can accept text or child elements.)

I don't think you can style empty <input> fields dynamically using just CSS (i.e. rules that apply whenever a field is empty, and don't once text is entered). You can select initially empty fields if they have an empty value attribute (input[value=""]) or lack the attribute altogether (input:not([value])), but that's about it.

Select an element with empty class attribute (class=) using CSS?

You can use element-attribute selector here with an empty class value

div[class=""] {
    color: red;
}

Demo

Note: You can replace the div with required element

---

Related Topics