A pseudo-class is a little different from previous CSS uses. CSS pseudo-classes are used to define styles at certain states of the HTML tag.
For example, you may use a pseudo-class to have a <DIV> or <a> tag change colors when you hover over or click on them.
To create a pseudo-class, you add a colon (:) after the last CSS selector. Below are some examples.
We know that to add CSS styles to an <a> tag, I simply use CSS that would look something like this:
a{
/*any CSS styles written inside of these curly brackets would alter all of the <a> tags*/
color:black;
}
Now, if we want to change the color to blue when we hover over this a tag, we can use the :hover pseudo-class. Here is an example:
a:hover{
color:blue;
}
This tag may look something like this:
Empty Link
There are tons of pseudo-classes in CSS. Some of these include:
- :hover - hover over the object
- :active - the object you are currently clicking
- :visited - objects you have already clicked on
- :first-child - the first time the corresponding tag appears.
Note that the doctype must be declared for this to work. You can also do, for example:
P h1:first-child{
/*any CSS styles written inside of these curly brackets would alter the first h1 tag in EVERY p tag on the page*/
}
- :lang - allows you to define special roles for different languages. For example:
P:lang(no){
quotes:”~” “~”;
}
This would add squiggly lines before and after any p tag with the attribute lang=”no”
- :checked – selects checked elements
- :empty - selects every tag that has no inner tag
- :not(selector) - selects every element that is not the selector
- :read-only - selects only elements with a "readonly" property specified
- :before - allows you to insert content before all certain elements
- :after - allows you to insert content after all certain elements
For all pseudo-classes, please visit w3schools.
Now that you know all of the ways you can select tags on your HTML page, let's discuss the CSS styles you can add to these tags.
Previous
Next