CSS Selectors A. The :not pseudo-class example & B. :focus-within CSS pseudo-class


Example

A. The syntax is presented above.

The following selector matches all <input> elements in an HTML document that are not disabled and don't have the class .example:

HTML:

<form>
    Phone: <input type="tel" class="example">
    E-mail: <input type="email" disabled="disabled">
    Password: <input type="password">
</form>

CSS:

input:not([disabled]):not(.example){
   background-color: #ccc;
}

The :not() pseudo-class will also support comma-separated selectors in Selectors Level 4:

CSS:

input:not([disabled], .example){
   background-color: #ccc;
}

Live Demo on JSBin

See background syntax here.

B. The :focus-within CSS pseudo-class

HTML:

  <h3>Background is blue if the input is focused .</p>
  <div>
    <input type="text">
  </div>

CSS:

div {
  height: 80px;
}
input{
  margin:30px;
}
div:focus-within {
  background-color: #1565C0;
}

enter image description here enter image description here