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