Web Development

More on CSS Classes

More on CSS Classes is the section 21 of Beginner’s Guide to CSS.

Before go more into this, you have to refresh what you have learned about basics of classes as selectors and ways to decorate tag. You can learned about it from or CSS Selectors section and Decorating Hyperlinks section in the tutorial. We are going to dig deep the theoretical background behind the scenes.

So in this section what we are actually going to do is learn about something called Pseudo Classes. CSS pseudo-classes are used to add special effects to some selectors.

Syntax is going like as follow.

[selector]:[pseudo-class] {
    [property]:[value];
}

Pseudo Classes of Hyperlink

Remember how we decorate a hyperlink by its state. Those states are actually represented by a pseudo class.

[code language=”css”] /* mouse over link */
a:hover {
color: #FF00FF;
}
[/code]

You can write the same thing using a CSS class we had already learned.

[selector].[class]:[pseudo-class] {
    [property]:[value];
}

[code language=”css”] /* mouse over link */
a.my_class:hover {
color: #FF00FF;
}
[/code]

Go to our Decorating Hyperlinks section and see how the four states of a hyperlink represent by a pseudo classes. And remember pseudo class names are not case sensitive.

Pseudo Class – First Child

This pseudo-class matches a specified element that is the first child of another element. Look at the following example.

[code language=”css”] p:first-child {
color: blue;
}
[/code]

In here the first paragraph element in the web page become the blue colored.

This is the first paragraph element in the page.

This is the second paragraph element in the page.

We are going to do another trick using the knowledge we learned from the previous section Combinator in CSS. Remember we used > mark to select the child element.

[code language=”css”] p > i:first-child {
color: blue;
}
[/code]

This will select the italic elements in a paragraph element and display the first italic element in blue color.

This is the first italic word. This is the second italic word.

Now look at the following code snippet. It uses the descendant selector combinator.

[code language=”css”] p:first-child i{
color: blue;
}
[/code]

This will select the first paragraph element in the web page and display all the italic elements in blue color.

This is the first italic word and this is the second italic word in first paragraph.
This is the first italic word and this is the second italic word in second paragraph.

 

Pseudo Class – Focus

This pseudo class can be used specially with input tags. When you click on a input text box to type something on, you can highlight the text box using using things. Look at the following example.

[code language=”css”] input:focus {
background-color: yellow;
}
[/code]

This one is really handy when creating a catchy form on a web page.


So in this section we look into another way of creating selectors using pseudo classes. In the next section we are going to discuss about pseudo elements. You might be confused between the two. But believe me they are different.

 

WHAT’S NEXT?

Explore More on CSS Selectors.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW