Web Development

More on CSS Selectors

More on CSS Selectors
Written by Sandeep Likhar

More on CSS Selectors is the section 22 of Beginner’s Guide to CSS.

Up to now we know what kind of things that we can put as a selector. We talked about combinators, classes and ids, pseudo classes as selectors in several sections in this tutorial. So in this section we are discussing something called pseudo elements in selectors.

CSS pseudo-elements are used to add special effects to some selectors. Remember, it can be used only for some, not all.

Following shows the syntax of it.

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

Also pseudo element can be used with a css class

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

Same like defining pseudo classes. But we now use the symbol :: in here. Let’s look at several pseudo elements in CSS.

First Line Pseudo Element

The ::first-line pseudo-element is used to add a special style to the first line of a text. But make a note, that ::first-line pseudo-element can only be applied to block-level elements. That’s why we earlier said pseudo elements cannot be used for all HTML elements.

Let’s take an example. If we set the first line pseudo element with a style for a paragraph element, the text that fitted into the first line of the paragraph will have the applied style. Other lines of the paragraph will be have the default style or the style that applied to the whole paragraph.

[code language=”css”] p::first-line {
color: #ff0000;
font-variant: small-caps;
}
[/code]

The following properties apply to the ::first-line pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

First Letter Pseudo Element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text. The ::first-letter pseudo-element can only be applied to block-level elements.

Remember what we did in the end of Float Elements section. Creating wonderful story lines with Gothical, Mythical effect in the first letter of the chapter. This is the easiest way to do that if you have a nice font accordingly. 

[code language=”css”] p::first-letter {
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
[/code]

The following properties apply to the ::first-letter pseudo- element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if “float” is “none”)
  • text-transform
  • line-height
  • float
  • clear

Before Pseudo Element

If you always need to add something before a certain something, this thing can be used. For example always add a image before a heading kind of a thing can be achieved using ::before pseudo-element.

[code language=”css”] h1::before {
content: url(header_icon.gif);
}
[/code]

After Pseudo Element

This pseudo element can be used as the same way of before pseudo element. For example always add a image after a heading kind of a thing can be achieved using ::after pseudo-element.

[code language=”css”] h1::after{
content: url(header_icon.gif);
}
[/code]

Always remember the double colon mark :: which we use to define pseudo elements. If you put only one colon mark : it means pseudo class.
And the other fact is we can use multiple pseudo elements for the same HTML element.For example we can use both first line and first letter pseudo elements for a same paragraph. In the following code snippet, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color.

[code language=”css”] p::first-letter {
color: #ff0000;
font-size: xx-large;
}

p::first-line {
color: #0000ff;
font-variant: small-caps;
}
[/code]


In this section we discussed about pseudo elements as selectors. Another thing we can add up to selectors same as the pseudo classes. So for now we are holding this topic because we talked so much about the selectors. You might be bored with it now. And that’s why in the next few sections we are going to do some cool stuff using the things that we had already learned. So stay tuned!

WHAT’S NEXT?

Let’s Create Navigational Bars with CSS.

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

3 Comments on "More on CSS Selectors"

Notify of
avatar
Sort by:   newest | oldest | most voted
Susan Amesquita
Guest

This is definitely interesting, You are very skilled blogger. We’ve joined your feed and appearance to seeking more of your excellent post. Also, I’ve shared your web site in my social networking sites!

Nathan Hurde
Guest

Good publish.Such fascinating read and details, thank you for sharing this submit, I??ve already bookmarked your weblog. I noticed that you could be putting a lot of time and effort into your weblog and detailed articles!

Annette
Guest

I used to be able to find good advice from your content.

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