Pseudo css element is special effect for specific css element.

There are so many pseudo code. We will learn some psudo code

Syntax of pseudo elements

selector:pseudo-element {property: value}

List of pseudo element

  1. First Letter (:first-letter)
  2. First Line (:first-line)
  3. First child (:first-child)
  4. before and after (:before, :after)
  5. hover(:hover)
  6. anchor pseudo(a:link, a:visited, a:active, a:hover)
  7. hover pseudo (:hover)
  8. Parent Child ( > )
  9. Adjacent + Sibling ( + )
  10. Mulitple Class (class1.class2)
  11. Attribute

    (attr)

  12.  

1. First Letter

HTML CODE


<p>
   Sed porttitor aliquet augue. Integer sagittis,
	  ante quis ullamcorper consectetur, lectus ipsum
   molestie ipsum, id congue metus enim sit amet
  quam. Sed et ante sed leo ornare pellentesque.
</p> 

CSS CODE

p:first-letter{
   font-size:10em;
}

Browser Support

Supportable Browser : IE7, FF3, Safari3, Opera 9, Netscape 9

Not Suportable Browser : IE6

Download Code

2. First Line

HTML CODE

<p>
   Sed porttitor aliquet augue. Integer sagittis,
   ante quis ullamcorper consectetur, lectus ipsum
   molestie ipsum, id congue metus enim sit amet quam.
  Sed et ante sed leo ornare pellentesque.
</p>  

CSS CODE

p:first-line{	color:red;}

Browser Support

Supportable Browser : IE7, FF3, Safari3, Opera 9, Netscape 9
Not Suportable Browser : IE6

Download Code

3. First Child

First child of specific element.

HTML

<p>  Sed porttitor aliquet augue. Integer sagittis,   ante quis ullamcorper consectetur, lectus   ipsum molestie ipsum, </p>

<p>  Id congue metus enim sit amet quam. Sed  et ante sed leo ornare pellentesque.</p>
<p>   Integer sagittis, ante quis ullamcorper et ante sed leo ornare pellentesque.</p>

CSS

p:first-child{
color:red;
}

4. Before and After

HTML CODE

<div class="box">   <p>
      Nunc pharetra bibendum elit.       Vivamus eu enim. Praesent sollicitudin.
      Aenean commodo uismod leo. Vestibulum erat.
      Suspendisse lectus sapien, ultricies nec,
      viverra non, gravida id, nibh. Class aptent
      tacitisociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos.
   </p></div>  

CSS CODE

.box {
  background-color: #c0c0c0;
  border: 1px solid #a29f9f;
  padding: 8px;
  width:261px;
  }
  .box:before {
  content: url(images/box_01.png); /* Display Image in top of div */ 
  display: block;
  line-height: 0.1;
  margin: -20px -10px -22px -9px; /* Adjusting design */ 
  }
  .box:after {
  clear: both;
  content: url(images/box_05.png); /* Display Image in bottom of div */ 
  display: block;
  line-height: 0.1;
  margin: 0 -10px -20px -9px; /* Adjusting design */
  }
  .box h2 {
  margin-top: 0;
  }
  p{
  margin:0px;
}

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, W3C CSS2
Not Suportable Browser : IE6, IE7

Download Code

5. Anchor pseudo

This achchor pseudo are those pseudo which related only anchor element . Ex : hover, active, link, visited

HTML CODE

<a href="#">Sed porttitor</a>

CSS CODE

 a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:orange;
}
a:active{
color:pink;
}
</style> 
Browser Compatibility of anchor pseudo
Ancho pseudo Action Supportable Browser Non Supportable Browser Note
link Default Apperance IE7, FF3, Opera9, Netscape 9, Safari 3 IE6  
hover effect when you touch with your mouse pointer IE6,IE7, FF3, Opera9, Netscape 9 , Safari 3 None If visited is define and if we click on a element then in IE6, IE7 does not support horver effect .
active effect when you click with your mouse pointer IE6,IE7, FF3, Opera9, Netscape 9, Safari 3 None  
visited effect after you click IE7, Safari3 , FF3, Netsape IE6, Opera9  

Download Code

6. hover pseudo

We have already learn about anchor hover pseudo . This one is slightly different. It contain every hover pseudo of html element.

HTML CODE

<input type="text" value="Text Box" name="name" id="name"  />

CSS CODE

input:hover{
background:red;
}

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7,W3C CSS2
Not Suportable Browser : IE6,

7. Child Parent

HTML

<h3>First Case </h3>

<div class="parent">Parent
<div class="child">Child</div>
</div>
<hr />
<h3>Second Case</h3>
<div class="parent">Parent

<div class="baby-sitter">Baby-sitter
<div class="child">Child</div>

 </div>
  </div>

<p>It is same as mother and her child. Grandson is not equal to son . Grandson is son of son. Link is pratical life it is also implemented in css code. Here in first case there is <em><strong>child</strong></em> div is in parent div . So, <strong><em>child</em></strong> div is red. But in second case child div is in <strong><em>baby-sitter</em></strong> css .So it is not effected any more. </p>

CSS

 .parent > .child {
color:#FF0000;
}

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7, W3C CSS2
Not Suportable Browser : IE6,

8. Adjacent + Sibling

It consists closest element . So, it effect to single closest element

HTML

<h2>Header 2</h2><p>Friend of h2</p><p>next paragraph</p> 

CSS

h2 + p {	background-color: red;}

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7, W3C CSS2
Not Suportable Browser : IE6,

9. Adjacent ~ Sibling

Adjacent tild sibling effects on all the specific element after any specific html element . For exmple : All p element’s color should be red after h1 element

HTML

<p>I am in top level. before h1 element</p>
  <h1>Header 1</h1>
  <p>I am closet p element of header h1</p>
  <p>I am paragraph after h1</p>

<span>I am span</span>

CSS

 h1 ~ p {
color: red;
} 

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7
Not Suportable Browser : IE6, Not W3C Standard

10. Adjacent ~ Sibling

It effect on using multiple css or effect with mixture of of two or more than two classes on single element

HTML

	<p class="black">I am bold only</p>	<p class="black">I am blue only.</p>	<p class="black blue">I mixture bold and blue</p>	<p class="black blue red">I mixture bold and blue + red</p>	<p class="pink black blue red">I mixture bold and blue + red and pink</p>

CSS

.black.blue.red {
  background-color: red;
  }
  .black {
  background-color: gray;
  }
  .blue {
  background-color: blue;
  }
.black.blue {
  background-color: yellow;
  }
.bold.blue.red {
  background-color: red;
  }

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7
Not Suportable Browser : IE6, Not W3C Standard

11. Attribute (Attr)

It directly effect to the element with the reference of element’s attribute

Attribute Only : Effect to the element with the reference of element’s attribute

Syntax : element[attribute]

HTML

<input class="mytxtBox" name="name" value="Enter Name" id="name" type="text" />

CSS


input[type] {   background-color: red;	}

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7,W3C CSS2
Not Suportable Browser : IE6,IE7


Attribute with Value
: : Effect to the element with the reference of element’s attribute’s value

Syntax : element[attribute=value]

HTML

<input class="mytxtBox" name="name" value="Enter Name" id="name" type="text" /><input type="checkbox" name="checkbox" value="checkbox" />

CSS

input[type=text] {
background-color: red;
}

Attribute Adjacent (~=)

Syntax : element[attribute~="value"] or [attribute~="value"]

HTML

<ul>

<li class="first">First class.</li>
<li class="second">Second class.</li>
<li class="third">Third class.</li>
 <li class="first second">First and second class.</li>

  <li class="first third">First and third class.</li>
  <li class="second third">Second and third class</li>
  <li class="first second third">First, second and third class.</li>

  </ul>

CSS

[class~=first] {
background-color: yellow;
}

Attribute Keyword (|=)

Syntax : element[attribute|="keyword"] or [attribute|="keyword"]

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7,W3C CSS2

Not Suportable Browser : IE6

HTML

<ul>    <li class="first">First class.</li>    <li class="second">Second class.</li>    <li class="third">Third class.</li>

    <li class="first-second">First and second class.</li>    <li class="first-third">First and third class.</li>    <li class="second-third">Second and third class.</li>    <li class="first-second-third">First, second and third class.</li></ul>

CSS

 [class|="first"] {
background-color: yellow;
} 

Browser Support

Supportable Browser : FF3, Safari3, Opera 9, Netscape 9, IE7,W3C CSS2
Not Suportable Browser : I

Advertisements