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

1

2

3

4

5

6

7

<style>

<input[type =checkbox]:checked + label {

color:red;

}

</style>

<input type="checkbox"/><label>Check tosee ifit turns tored.</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

1

2

3

4

5

6

7

8

9

10

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

<style>

input:valid {border:1pxsolidgreen;}

input:invalid {border:1pxsolidred;}

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.