CSS pseudo class

      No Comments on CSS pseudo class

CSS pseudo class is used to define a special state of an element.

CSS pseudo class can be used for:

  • Style an element when a user mouses over it.
  • Style visited and unvisited links differently.
  • Style an element when it gets focus

Syntax for applying pseudo class:

selector:pseudo-class {property: value} 

CSS classes can also be used with pseudo-classes −

selector.class:pseudo-class {property: value}

Some pseudo classes commonly used are:

ValueDescription
:linkadds special style to an unvisited link.
:visitedthis class adds special style to a visited link.
:hoverclass adds special style to an element when you mouse over it.
:activeUse this class to add special style to an active element.
:focusAdds special style to an element while the element has focus.
:first-childTo add special style to an element that is the first child of some other element.
:langClass to specify a language to use in a specified element.

Applying CSS pseudo class to Anchor <a>

Links can be displayed in different ways:
Example:

a:link
{ 
  color:orange;
}
a:hover
{ 
 color:purple;
}
a:visited
{
  color:red;
}
a:active
{
  color:brown;
}

Pseudo class and CSS classes

Pseudo-classes can be combined with CSS classes.When you hover over the link in the example, it will change color:
Example:

<style>
.highlight:hover
{
    color:orange;
}
</style>
<a class='highlight' href='#'>Link </a> 

Applying :hover at <div>

Example:

<style>
.divclass
{
  color:purple;
}
.divclass:hover //applying :hover class on css class
{
 color:red;
}
</style>
I am a divison. I have :hover class applied on me.
Hover me to see what it does!!!

CSS pseudo class – :first-line and :first-child

The :first-child pseudo-class matches a specified element that is the first child of another element. The :first-line pseudo class will select the first line of any element and apply the style code on that.
Example:

<style>
p i:first-child {  
    color: blue;
}
.p1:first-line
{
  color:red;
}
</style>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p class='p1'>HI, css is known as cascading style sheets.<br>CSS brings magic to html.</p>

I am a strong person. I am a strong person.

I am a strong person. I am a strong person.

HI, css is known as cascading style sheets.
CSS brings magic to html.

:before and :after pseudo classes

The :before selector inserts something before the content of each selected element(s).
Use the content property to specify the content to insert.
Use the :after selector to insert something after the content.
Example for using :before

<style>
.p2:before { 
    content: "Note";
    background-color:#f2f2f2;
    color: red;
    font-weight: bold;
}
</style>
<p class='p2'>My name is Scanfcode</p>
<p class='p2'>I am new to this world</p>
<p>I am a coding blog.I can teach you all about CSS</p>

My name is Scanfcode

I am new to this world

I am a coding blog.I can teach you all about CSS

Example for using :after

<style>
.p3:after { 
    content: "new";
    background-color:#f2f2f2;
    color: red;
    font-weight: bold;
}
</style>
<p class='p3'>My name is Scanfcode</p>
<p>I am a coding blog.I can teach you all about CSS</p>

My name is Scanfcode

I am a coding blog.I can teach you all about CSS

CSS pseudo class

:focus pseudo class

The :focus selector is used to select the element that has focus.
Example for using :focus

<style>
input[type=text]
{
  width: 100px;
}
input[type=text]:focus 
{
  width: 250px;
}
</style>
Search: <input type="text" name="search">
Search:

Leave a Reply

Your email address will not be published. Required fields are marked *