property:value;
}
The Pseudo-Class is most often used with links (tags) to create an effect that changes the text state every time the user moves the mouse over it.
There are 4 states equivalent to the 4 Pseudo-Class of the link:
Note :
For example :
Website homepage
Network administrator
The code above defines the link at:
Pseudo-classes can be combined with CSS classes.
For example, when you hover over the link, it changes color:
a.highlight:hover {
color: #ff0000;
}
Website homepage
Network Administration (Use Pseudo-class to combine CSS Class)
Technology Village - Administration
network (Do not use Pseudo-class to combine CSS Class)
An example of using pseudo-class : hover above
changes the background color of the element.
div:hover {
background-color: purple;
}
Hovering over the div element below will change its background color:
Create a tooltip : simple hover type of mouse movement on the element
to display an element
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Pseudo-class : first-child defines a specific element as the first child of another element and adds a special style to that element.
first and style it
p:first-child {
color: purple;
}
To : first-child can work in IE, need to declare the element at the beginning of the document.
For example, to
first with purple text, can do the following:
Website Administration Network.
Website Administration Network.
Note: To: first-child can work in IE, need to declare
element! DOCTYPE at the beginning of the document.
and style it
pi:first-child {
color: blue;
}
The following example uses : first-child to define the element as the first child in all
and add special styles for .
Website TipsMake.com . Website TipsMake.com .
Website TipsMake.com . Website TipsMake.com .
Note: To : first-child can work in IE, need to
declare the element! DOCTYPE at the beginning of the document.
first and style it
p:first-child i {
color: blue;
}
The following example uses : first-child to identify all elements as the first child element in
first and add special style for .
Website TipsMake.com . Website TipsMake.com .
Website TipsMake.com . Website TipsMake.com .
Note: To : first-child can work in IE, need to
declare the element! DOCTYPE at the beginning of the document.
Use Pseudo-class : lang in CSS to define a special rule for a particular language in a specific element.
Vietnamese A
Vietnamese text is quoted.
This class is very useful for documents presented by many languages and has different conventions.
For example:
Vietnamese A
Vietnamese text is quoted.
English A quoted English text.
French A
French text is quoted.
Note: To : lang can work in IE, need to declare
element! DOCTYPE at the beginning of the document.
Previous post: Combinator in CSS
Next lesson: Pseudo-element in CSS