css valid pseudo class
Uncategorized

List Of CSS Valid Pseudo Classes

CSS Valid Pseudo Classes for your creative web design process

list of css valid pseudo classes

Today we will talk about the useful css valid pseudo class.Mostly we use css pseudo classes for creative or decorative purpose.For you might have seen this in many sites, in the naviation menu a separator | like this or / will used to seperate a menu link from another one.
This can acheived using css pseudo selector, imagine that the html for the menu is stucred like this ul > li > a here we can use the li tag or a tag we can do this using a pseudo selector called :after, this will add something to the selected html element.

And the css for this will be.
ul >li:after{
	content:'|';
}

usually the last menu item will not have a separtor, so we can remove the last separtor by using an another pseudo class called :last-child.

ul > li:last-child:after{
	content:'';
}

it is important that you select the last child first and add the another pseudo call :after next to that
then leave the content empty this will do the trick. Here is the List of css Valid Pseudo Class.

  • :first-child – this will select the first child.
  • :last-child – this will select the last child.
  • :first-line – this will select the first line.
  • :before – this will insert some content before the selected element.
  • :after – this will insert some content after the selected element.
  • Below pseudo classes will be used to style links in a page.

  • :link – this will select unvisited links.
  • :visited – this will select visited links.
  • :active – this will select active link.
  • :hover – this will select a link in which mouse hover overs.

css tricks ribbon

you can see with just using after and before classes csstricks has created a cool ribbon.

Visit The Page

Keep in touch for more css based tips and freebies.

Share It...Share on Facebook0Tweet about this on TwitterShare on Google+1Share on StumbleUpon1Pin on Pinterest0Share on Reddit0Digg thisShare on Tumblr0
Previous Post Next Post

You Might Also Like

No Comments

Leave a Reply