CSS Pseudo Classes & Pseudo Elements

Leave a Comment

Hii guy's have you have ever tried CSS Pseudo Classes might be no so lets start from basic.

What is Pseudo Classes and where are they used?

Pseudo-class is used to define a special state of an element or relation to the selector such as - Mouse Over, Focus etc. Pseudo class is Special CSS Selectors.
Most Common Pseudo Classes used are - hover, focus, active, visited.
Syntax of Pseudo Class

selector:pseudo_class { property: value; }
Here, selector can either be class name, ID name, tag. Pseudo_class define state of element when to be applied. Property which are to be applied to state occurs. It can relate with events in Javascript & JQuery.

Lets see Pseudo Classes and their behaviour

:hover - Get enabled when Mouse comes over that element. It is one of most used pseudo class of CSS.

:focus - Gets enabled when element gets a focus i.e. click on it, key press. It is generally applied on input, button.

:active - Gets enabled when element links get active i.e. link becomes active when user click on it. It selects element for the time between the user presses the mouse button and releases it.

:visited - Used to select previously visited Links. Visited Links Styling in most browser is limited dus to security reasons.

Form Related Pseudo Classes/Selectors

:checked - Used to select all elements that are selected or checked. It works for input type radio-buttons, checkbox and select tag child option. In Select Tag it get applied to only selected option.

:disabled - Applied to every input type element which is disabled or have disabled attribute. It is mostly used to select elements from Form.

List Related CSS Pseudo Selectors

:first-child - Used to select very first child of its parent. Like you have written ul li:first-child{}, then it will select First li child of ul.

:last-child - Same as above it will used to select the last child of its parent. Like if you have written div.class_name p{}, it will select Last p of div having class 'class_name'.

:nth-child - Like above it is also used to select child element according to its parent. It will select just nth child of its parent, where as n can be any integer number.

div.abc p:nth-child(n){}

:nth-of-type(N) - This pseudo class/selector is used for every element that is nth child. where n can be any number, formula or keyword. Through this you can assign different CSS Style to odd/even child elements or more with your formula

Like to Apply CSS to only even elements
div.abc p:nth-of-type(even){}
And to Apply CSS to only odd elements
div,abc p:nth-of-child(odd){}
It will make difference here
<div class="abc">
    <p>Hello Odd1</p>
    <p>Hello Even1</p>
    <p>Hello Odd2</p>
    <p>Hello Even2</p>

Text-related pseudo class selectors / elements

::first-letter - Used to select the very first letter of block/paragraph or any element on which it it applied. It has limited properties which can be applied on it.
  • All Font Properties
  • All Background Properties
  • All Margin & Padding Properties
  • Border & Color Properties
  • All Text Properties such text-decoration, line-height, text-shadow, text-transform, word-spacing, letter-spacing
  • and some of Others - float, vertical-align, box-shadow

::first-line - Used to select or apply CSS Style to first line of block(element containing text). It also has limitations of properties such as -
  • All Font Properties
  • All Background Properties
  • Color Properties
  • All Text Properties such text-decoration, line-height, text-shadow, text-transform

Content-related pseudo "elements"

::before - Used add content just before the selector element. To add content/text use 'content' property for that.

::after - Used add content just after the selector element. To add content/text use 'content' property for that. This property has full support from IE 9+

There are many of CSS Pseudo Classes which makes CSS Cool. So we'll discus them later.

About Author: Divy Singh Rathore

I am Founder of Codoat and live in Indore, India.
I am doing Engineering in Computer Science and like to do programming & designing.
Proud to be an Indian


Post a Comment

Please Note :- We have Zero Tolerance to Spam comments.

© 2015 Codoat - Codes for You All Rights Reserved. | Sitemap | Terms & Condition | Privacy Policy