CSS Selector to Match an Element Without Attribute X

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

How to write a CSS Selector selecting elements NOT having a certain attribute?

I think more accurate CSS Selector is:

div[class]:not([style])>button

because the button element is a child of div element.

Hope it helps you!

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

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.

How can I select the item that doesn't have attribute

*:not([title])

This will select everything that does not have attribute title.

See this JSFiddle for an example.

Select an element without selecting descendants

Use the CSS child combinator >:

.settings > ul > li > i {
  opacity: 0.5;
}

<div class="settings">
  <ul>
    <li>
      <i>Select this element</i>
      <ul>
        <li>
          <i>but not this one</i>
          <span></span>
        </li>
        <li>
          <i>or not this one</i>
          <span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS :Not attribute

Attribute selectors are surrounded by [], so your selector should look like this instead:

table:not([width="100%"]) {
    width: myValue;
}

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) */
}

Why does an attribute CSS selector work both with and without apostrophes?

From the specification:

Attribute values must be <ident-token>s or <string-token>s

You never need to use apostrophes. There are useful only for values with spaces.

[data=ok] {
  height:100px;
  background:red;
}
[data="ok ok"] {
  height:100px;
  background:blue;
}

<div data=ok>

</div>

<div data="ok ok">

</div>

CSS match elements with ANY attribute

There is no such selector.¹

Such a selector has been proposed or requested a number of times over the last several years, and out of these the only time someone even bothered to suggest a use case, it's one that has no relevance to CSS at all:

this selector would be useful for debugging purposes in order to verify in complex layouts whether an element has attributes or not (instead of using DOM's hasAttributes() method).

Even if this was your use case (which, like the other threads on www-style, you haven't stated at all in your question), the fact remains that no such selector exists.

¹ _{There is ::attr(*), but that selects attribute nodes, not element nodes based on attributes (which, ostensibly, is what the asker is interested in). Completely different things.}

CSS Selector to Match an Element Without Attribute X