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

suggest change

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;
}

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents