Scribd
Upload
11 views

3css Part-Pseudo

The document discusses using CSS pseudo-classes and pseudo-elements to style elements in specific states or add content. Pseudo-classes like :hover, :active, :link, and :visited are used to style links and elements in different interactive states. Pseudo-elements like ::before and ::after are used to insert content before or after an element's existing content.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
11 views

3css Part-Pseudo

The document discusses using CSS pseudo-classes and pseudo-elements to style elements in specific states or add content. Pseudo-classes like :hover, :active, :link, and :visited are used to style links and elements in different interactive states. Pseudo-elements like ::before and ::after are used to insert content before or after an element's existing content.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 9

 /* Internal links, beginning with "#" */

a[href^="#"] { background-color: gold; }


 /* Links with "example" anywhere in the URL */
a[href*="example"] { background-color: silver; }
 /* Links with "insensitive" anywhere in the URL, regardless of
capitalization */
a[href*="insensitive" i] { color: cyan; }
 /* Links that end in ".org" */
a[href$=".org"] { color: red; }

<ul> <li><a href="#internal">Internal link</a></li>


<li><a href="http://example.com">Example link</a></li>
<li><a href="#InSensitive">Insensitive internal link</a></li>
<li><a href="http://example.org">Example org link</a></li>
</ul>
 A CSS pseudo-element is used to style
specified parts of an element.
For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an
element
selector::pseudo-element { property: value; }
 .ribbon { background-color: #5BC8F7; }

.ribbon::after {
content: "This is a fancy orange box.";
background-color: #FFBA10;
border-color: black;
border-style: dotted; }

<span class="ribbon">Look at the orange box after this text.


</span>
 <style type="text/css">
p::before {
    content: "String ... ";
}
</style>
<p>paragraph content</p>
 ::selection {
color: #00CCFF;
background: #CC6633;
}
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
 A pseudo-class is used to define a special
state of an element.
 For example, it can be used to:
 Style an element when a user mouses over it
 Style visited and unvisited links differently
 <p>
This paragraph contains a link:
<a href="#">This link will turn red while you click on it.</a>
The paragraph will get a gray background while you click on it or
the link.
</p>

a:link { color: blue; } /* Unvisited links */


a:visited { color: purple; } /* Visited links */
a:hover { background: yellow; } /* Hovered links */
a:active { color: red; } /* Active links */
p:active { background: #eee; } /* Active paragraphs */
 <style type="text/css">
input:checked {
    cursor:crosshair;
}
</style>
<input type="checkbox" name="cb1">
<input type="checkbox" name="cb2"
checked="checked">

You might also like