Class 6 Exam > Class 6 Notes > CSS for Beginners > CSS Pseudo-class
CSS Pseudo-class | CSS for Beginners - Class 6 PDF Download
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Links can be displayed in different ways:
Example
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
Pseudo-classes and HTML Classes
Pseudo-classes can be combined with HTML classes:When you hover over the link in the example, it will change color:
Example
a.highlight:hover {
color: #ff0000;
}
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
Example
div:hover {
background-color: blue;
}
Simple Tooltip Hover
Hover over a <div> element to show a <p> element (like a tooltip):
Hover over me to show the <p> element.
Example
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS - The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
Match the first <p> element
In the following example, the selector matches any <p> element that is the first child of any element:
Example
p:first-child {
color: blue;
}
Match the first <i> element in all <p> elements
In the following example, the selector matches the first <i> element in all <p> elements:
Example
p i:first-child {
color: blue;
}
Match all <i> elements in all first child <p> elements
In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:
Example
p:first-child i {
color: blue;
}
CSS - The :lang Pseudo-class
The :lang pseudo-class allows you to define special rules for different languages.
In the example below, :lang defines the quotation marks for <q> elements with lang="no":
Example
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
More Examples
Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.
Use of :focus
This example demonstrates how to use the :focus pseudo-class.
Test Yourself With Exercises
Exercise:
Set the background-color to red, when you mouse over a link.
<style>
{
background-color: red;
}
</style>
<body>
<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://w3schools.com">This is a link.</a>
</body>
<style>
a:hover
{
background-color: red;
}
</style>
<body>
<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://w3schools.com">This is a link.</a>
</body>
All CSS Pseudo Classes
All CSS Pseudo Elements
The document CSS Pseudo-class | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
|
10 videos|41 docs|23 tests
|
About this Document
|
Nov 05, 2024 Last updated |
Document Description: CSS Pseudo-class for Class 6 2024 is part of CSS for Beginners preparation.
The notes and questions for CSS Pseudo-class have been prepared according to the Class 6 exam syllabus. Information about CSS Pseudo-class covers topics
like What are Pseudo-classes? and CSS Pseudo-class Example, for Class 6 2024 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for CSS Pseudo-class.
Introduction of CSS Pseudo-class in English is available as part of our CSS for Beginners
for Class 6 & CSS Pseudo-class in Hindi for CSS for Beginners course.
Download more important topics related with notes, lectures and mock test series for Class 6
Exam by signing up for free. Class 6: CSS Pseudo-class | CSS for Beginners - Class 6
Description
Full syllabus notes, lecture & questions for CSS Pseudo-class | CSS for Beginners - Class 6 - Class 6 | Plus excerises question with solution to help you revise complete syllabus for CSS for Beginners | Best notes, free PDF download
Information about CSS Pseudo-class
In this doc you can find the meaning of CSS Pseudo-class defined & explained in the simplest way possible. Besides explaining types of
CSS Pseudo-class theory, EduRev gives you an ample number of questions to practice CSS Pseudo-class tests, examples and also practice Class 6
tests
|
Explore Courses for Class 6 exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
practice quizzes
,past year papers
,study material
,shortcuts and tricks
,ppt
,Free
,Objective type Questions
,CSS Pseudo-class | CSS for Beginners - Class 6
,MCQs
,Sample Paper
,CSS Pseudo-class | CSS for Beginners - Class 6
,Semester Notes
,CSS Pseudo-class | CSS for Beginners - Class 6
,mock tests for examination
,video lectures
,Exam
,Viva Questions
,Previous Year Questions with Solutions
,Summary
,Important questions
,Extra Questions
;
Additional Information about CSS Pseudo-class for Class 6 Preparation
CSS Pseudo-class Free PDF Download
The CSS Pseudo-class is an invaluable resource that delves deep into the core of the Class 6 exam.
These study notes are curated by experts and cover all the essential topics and concepts, making your preparation more efficient and effective.
With the help of these notes, you can grasp complex subjects quickly, revise important points easily,
and reinforce your understanding of key concepts. The study notes are presented in a concise and easy-to-understand manner,
allowing you to optimize your learning process. Whether you're looking for best-recommended books, sample papers, study material,
or toppers' notes, this PDF has got you covered. Download the CSS Pseudo-class now and kickstart your journey towards success in the Class 6 exam.
Importance of CSS Pseudo-class
The importance of CSS Pseudo-class cannot be overstated, especially for Class 6 aspirants.
This document holds the key to success in the Class 6 exam.
It offers a detailed understanding of the concept, providing invaluable insights into the topic.
By knowing the concepts well in advance, students can plan their preparation effectively.
Utilize this indispensable guide for a well-rounded preparation and achieve your desired results.
CSS Pseudo-class Notes
CSS Pseudo-class Notes offer in-depth insights into the specific topic to help you master it with ease.
This comprehensive document covers all aspects related to CSS Pseudo-class.
It includes detailed information about the exam syllabus, recommended books, and study materials for a well-rounded preparation.
Practice papers and question papers enable you to assess your progress effectively.
Additionally, the paper analysis provides valuable tips for tackling the exam strategically.
Access to Toppers' notes gives you an edge in understanding complex concepts.
Whether you're a beginner or aiming for advanced proficiency, CSS Pseudo-class Notes on EduRev are your ultimate resource for success.
CSS Pseudo-class Class 6 Questions
The "CSS Pseudo-class Class 6 Questions" guide is a valuable resource for all aspiring students preparing for the
Class 6 exam. It focuses on providing a wide range of practice questions to help students gauge
their understanding of the exam topics. These questions cover the entire syllabus, ensuring comprehensive preparation.
The guide includes previous years' question papers for students to familiarize themselves with the exam's format and difficulty level.
Additionally, it offers subject-specific question banks, allowing students to focus on weak areas and improve their performance.
Study CSS Pseudo-class on the App
Students of Class 6 can study CSS Pseudo-class alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the CSS Pseudo-class,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of CSS Pseudo-class is prepared as per the latest Class 6 syllabus.
|
© EduRev
|
Education Revolution
|
Follow Us
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup