css3 UI pseudo classes

css3 UI pseudo classes

In previous article we looked in to the css3 attribute selectors , and in this article we will explore css3 UI pseudo classes, We can select elements based on selectors and attributes but we can also select  elements based on element’s Current State. For Example

:enabled

:disabled

:checked

Example

<style>
  <input[type =checkbox]:checked + label {
     color: red;
  }
</style>

<input type="checkbox" /> <label>Check to see if it turns to red.</label>

In the above example when he checkbox is checked it will turn to red color.

Form related UI pseudo classes.

• :valid
• :invalid
• :required
• :optional
• :in-range
• :out-of-range
• :in-range
• :read-only
• :read-write
• :default

Example

<input type="number" min="5" max="8" step="1" />

<style>
        input:valid {border: 1px solid green; }
        input:invalid {border: 1px solid red; }
        input:required { border-width: 5px; }
        input:optional { border-width: 10px; }
        input:out-of-range { background-color: pink }
        input:in-range { background-color: lightgreen }
  </style>

Run the code above in your browser and see the power of CSS3.  For a valid or invalid text input you don’t need any JavaScript but with only CSS3 can change UI.

Thats it for this article in next article we will explore the CSS3 selectors in more detail.