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

Question

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

I have 2 <div> nodes as follows:

• First:

  <div class="weEq5" style="will-change; width;">
      <button class="_35EW6">
  

• Second:

  <div class="weEq5">
      <button class="_35EW6">
  

I need to select the <div> (with the similar class) and each of them which have a similar descending <button> but without the style attribute.

XPath seems working fine as:

//div[@class and not (@style)]/button

I am looking for an equivalent CssSelector.

Trials:

div[class :not(style)]>button (doesn't works).

I have been through the following discussion but they seem to be discarding the class attribute as :not([class]) as in:

• Can I write a CSS selector selecting elements NOT having a certain class?
• Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

I was looking in similar lines ending with :not(attribute).

Answer 1

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!

Answer 2

That's the code you're looking for:

div:not([style]) button{
  background-color: red;
}

Now let's break it down. We have have four selectors in this example:

1. div and button - these select html elements. We can replace it for example with a class selector like .weEq5.
2. :not() - indicates that we want everything that does not qualify as the selector inside the brackets.
3. [style] - an attribute selector which is very powerful. We can place inside the not any other css selector like html tag names (button or div), class names or ids.

The combination of div:not([style]) means that we want all divs that do not have a style attribute. After which we have a space and a button means that we want all the buttons that are inside the above selector.

Adding a > before the button div:not([style]) > button will only select button elements which are direct children of the selected div. It will exclude from selection buttons that are deeper inside the div.