{"id":5675,"date":"2015-07-16T12:15:56","date_gmt":"2015-07-16T09:15:56","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5675"},"modified":"2018-01-08T14:18:40","modified_gmt":"2018-01-08T12:18:40","slug":"css-pseudo-class-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-pseudo-class-example\/","title":{"rendered":"CSS Pseudo Class Example"},"content":{"rendered":"

In this example we are talking about CSS pseudo-classes concept.<\/p>\n

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover<\/code> will apply a style when the user hovers over the element specified by the selector.<\/p>\n

A pseudo-class is used to define a special state of an element.<\/p>\n

Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 has full support of them.<\/p>\n

Below we will have a look at the general structure and then exmaples.
\n 
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Document Setup<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Pseudo Class Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
In the HTML section, we will be adding elements and in the style section refer to these elements and use pseudo-classes.<\/p>\n
2. Syntax and What’s New in CSS3?<\/h2>\n
Before applying any of the pseudo classes, here you have the basic syntax to be applied.<\/p>\n
selector:pseudo-class {\r\n  property: value;\r\n} \r\n<\/pre>\n
In CSS3 apart from pseudo-classes that already existed like :hover<\/code>, :active<\/code>, :checked<\/code>, :default<\/code>, there are a ton of new pseudo classes. Below you can find most of the new pseudo classes and a short explanation for each of them:<\/p>\n