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
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
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