Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

What Is UI Elements-Pseudo Class And How To Use In CSS3?

UI means user interface. The UI element states pseudo-classes enables you to specifythe appearance of UI elements, such as buttons and check boxes. We can add our style to input like enabled, disabled or checked, that can be consider as pseudo class. There are many elements that we can use in our way like visit, active, hover, focus, checked etc.

Let’s see how they work. Normally, any attribute is enable by default. To make them disable, we have to define it. First, we will see hover effect -

input[type=text] {background:red;}
.target{background:yellow;}
a:hover{color: green;}

Go to browser and see the resulting effect. When you hover your cursor over text, it become green. Now, we will see focus effect -

Add command:input[type=text]:focus{border:1px solid green; outline:none;}

Save it and check in the browser, a green color border will appear when focus on text. Let’s see an Example for disabled -

First go to HTML file and make email command disable from body by typing disabled. Then in CSS, define input for same as input -
disabled {background:pink;}

Go to browser and check, email function is disabled. Same way, write command for enable -
input: enabled {background: yellow;}

You will see, all inputs that are enabled, will have yellow background.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere