25. Pseudo-Classes and Pseudo-Elements

Using Dynamic Pseudo-Classes
changing the color of visited and unvisited links, to the A element.
the dynamic pseudo-classes include :link, :visited, :hover, :active, and :focus classes
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
a:link {color:red;}
a:visited {color:green;}
a:active {color:orange;}
</STYLE>
</HEAD>
<BODY>
<H1><A href="dynamicps2.html">Dynamic Pseudo classes page 2</A></H1>
</BODY>
</HTML>
a link to the dynamicps2.html file is created by using the A element of HTML
dynamicps2.html
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
a:focus{border-width: 10;border-style: solid;border-color: black;background-color:lime;}
p:hover {background-color:yellow;color:green;}
</STYLE>
</HEAD>
<BODY>
<H1><A href="dynamicps1.html">Dynamic Pseudo classes page 1</A></H1>
<P>
demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text
</P>
</BODY>
</HTML>

Using the target pseudo-class
the :target pseudo-class is used to specify a target element.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">

div, ul, li, a, p {
padding:0; margin:0;
}
#content {
width:500px;
margin:auto;
font-size:20;
}
ul, div > div {
margin-bottom:1em;
}
li {
list-style:none;
}
div > div {
padding:1em;
border:1px solid #ffffd3;
}
div > div p:first-line {
font-variant:small-caps;
font-size:1.2em;
}

div > div:target {
border:2px solid blue;
background:yellow;

}

</STYLE>
</HEAD>
<BODY>
<DIV id="content">

<UL>
<LI><A href="#b1">Block 1</A></LI>
<LI><A href="#b2">Block 2</A></LI>
<LI><A href="#b3">Block 3</A></LI>
<LI><A href="#b4">Block 4</A></LI>
</UL>

<DIV id="b1">
<P>Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </P>
</DIV>

<DIV id="b2">
<P>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2 </P>
</DIV>

<DIV id="b3">
<P>Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 Paragraph 3 </P>
</DIV>

<DIV id="b4">
<P>Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 Paragraph 4 </P>
</DIV>

</DIV>
</BODY>
</HTML>

Using the language pseudo-class

the :lang pseudo-class is used to specify a language for an element.

<!DOCTYPE HTML>

<HEAD>

q:lang(number)

{

quotes: "~" "~";

}

</STYLE>

</HEAD>

<BODY>

<P>lang text<Q lang="number">quotation mark</Q> lang text.</P>

<P>In this example, lang defines the quotation marks for q elements

with lang="number":</P>

</BODY>

</HTML>

Using the UI element states pseudo-classes

the UI element states pseudo-classes enable you to specify the appearance of UI elements, such as buttons and check boxes.

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>UI element states</TITLE>

button.style {

background-color: lime;

}

button.style:disabled {

background-color: magenta;

color: white;

}

button.style:enabled {

background-color: blue;

color: yellow;

}

span {

background-color: orange;

}

input:checked + span {

background-color: green;

color: white;

}

input:indeterminate + span {

background-color: red;

}

</STYLE>

</HEAD>

<BODY>

<P>Default style:</P>

<BUTTON disabled="disabled">disabled</BUTTON>

<BUTTON>enabled</BUTTON><BR />

<INPUT type="checkbox" checked="checked" />checked by default

<INPUT type="checkbox" />not checked by default<BR />

<INPUT type="radio" checked="checked" />checked by default

<INPUT type="radio" />not checked by default<BR />

<P>Using UI element states:</P>

<BUTTON class="style" disabled="disabled">disabled</BUTTON>

<BUTTON class="style">enabled</BUTTON><BR />

<INPUT type="checkbox" checked="checked" /><SPAN>checked by default</SPAN>

<INPUT type="checkbox" /><span>not checked by default</SPAN><BR />

<INPUT type="radio" checked="checked" /><SPAN>checked by default</SPAN>

<INPUT type="radio" /><SPAN>not checked by default</SPAN><BR />

<INPUT type="checkbox" id="here" /><SPAN>Made indeterminate by scripting</SPAN>

</FORM>

window.onload = function() {

document.getElementById("here").indeterminate = true;

}

</SCRIPT>

</BODY>

</HTML>

the :checked and :interminate pseudo-classes are not supported by all browsers, therefore the output of the UIelementstates.html file is shown in the Mozilla Firefox browser

Using the structural pseudo-classes

allows the selection of elements on the basis of some extra information, for instance the position of their child elements.

ex:

:first-child

:nth-last-child(N)

where :first child selects the first child element of its parent and :nth-last-child(N) selects the specified child element by starting the counting from the last child.

<!DOCTYPE HTML>

<HEAD>

:root { background:rgb(230,238,213); }

p:first-of-type { border: 2px solid black;background:lime; }

p:last-of-type { border: 2px solid black;background:orange; }

li:first-child { border: 2px solid black;background:pink; }

p:nth-last-of-type(2) { border: 2px solid black;background:red; }

li:nth-last-child(2) { border: 2px solid black;background:aqua; }

</STYLE>

</HEAD>

<BODY>

<P>Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 Paragraph 1 </P>

<UL>

</UL>

<P>

<H1>Paragraph 2 Paragraph 2 Paragraph 2 Paragraph 2</H1></P>

<P>

Paragraph 3

<P>child 1</P>

<P>child 2</P>

<P>child 3</P>

<P>child 4</P>

<P>child 5</P>

</P>

</BODY>

</HTML>

:nth-child(N), which selects the elements on the basis of their position within the child elements of a parent element.

<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/css">
.tb{background-color:rgb(155,187,89);}
.chead {background-color:rgb(155,187,89);}
tr:nth-child(odd) { background-color:rgb(230,238,213);}
tr:nth-child(even) {background-color:white;}
</STYLE>
</HEAD>
<BODY>
<TABLE class="tb">
<TR>
<TH class="chead">column1</TH>
<TH class="chead">column2</Th>
</TR>
<TR class="odd">
<TD>Row 1 column 1</TD>
<TD>Row 1 column 2</TD>
</TR>
<TR class="even">
<TD>Row 2 column 1</TD>
<TD>Row 2 column 2</TD>
</TR>
<TR class="odd">
<TD>Row 3 column 1</TD>
<TD>Row 3 column 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Using the Negation Pseudo-Class

:not(s)

<!DOCTYPE HTML>

<HEAD>

<TITLE>:not() negation pseudo class test</TITLE>

p {

background: orange;

border: 1px solid #000;

}

:not(p) {

background: silver;

margin: 30px;

}

a {

background: magenta;

color: blue;

}

a:not([href*=google]) {

background: green;

color: white;

}

</STYLE>

</HEAD>

<BODY>

<P>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph </P>

<UL>

<LI><A href="http://google.com">Google</A></LI>

<LI><A href="http://www.webmasterworld.com">WebmasterWorld</A></LI>

<LI><A href="http://google.co.uk">Google UK</A></LI>

<LI><A href="http://www.rediff.com">Rediff</A></LI>

<LI><A href="http://www.yahoo.com">Yahoo</A></LI>

</UL>

demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text

<P>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph </P>

</BODY>

</HTML>

Using the ::first-line pseudo-element

::first-line pseudo-element applies styling to the first line of text.

<!DOCTYPE HTML>

<HEAD>

p:first-line

{

color: green;

font-variant: small-caps;

}

</STYLE>

</HEAD>

<BODY>

<P> first line</BR>

second line</BR>

third line</P>

</BODY>

</HTML>

Using th ::first-letter pseudo-element

<!DOCTYPE HTML>

<HEAD>

p:first-letter

{

color:#985645;

font-size:50px;

}

</STYLE>

</HEAD>

<BODY>

<P> First letter First letter First letter First letter </P>

</BODY>

</HTML>

Using the ::before pseudo-element

::before pseudo element allows you to insert some content before any element.

the ::before pseudo-element is used in association with the content property to insert content before an element.

<!DOCTYPE HTML>

<HEAD>

p.note:before { content: "Note: " }

p.note { border: solid green }

</STYLE>

</HEAD>

<BODY>

demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text

<P class="note">We are using Google Chrome browser</P>

</BODY>

</HTML>

Using the ::after pseudo-element

<!DOCTYPE HTML>

<HEAD>

body:after {

content: "The End";

display: block;

margin-top: 2em;

text-align: center;

background-color:red;

color:white;

font-size: 1em;

}

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Pages

25. Pseudo-Classes and Pseudo-Elements

No comments:

My Favorite Books

Books

HTML Programs

HTML Basic

JavaScript