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
- First Letter (:first-letter)
- First Line (:first-line)
- First child (:first-child)
- before and after (:before, :after)
- hover(:hover)
- anchor pseudo(a:link, a:visited, a:active, a:hover)
- hover pseudo (:hover)
- Parent Child ( > )
- Adjacent + Sibling ( + )
- Mulitple Class (class1.class2)
- Attribute
(attr)
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>
| 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
