CSS Tips n Tricks
1) Change nested element style with ID (#) and Class (.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Tricks Page</title>
<style type="text/css">
span { font-weight: bold; }
td > span:first-child { color: Green; }
td#tdID > span:first-child { color: Green; }
td.tdClass > span:first-child { color: Green; }
td#tdID span { font-size :large;}
td.tdClass span.spanClass2 { color: Blue; }
td.tdClass span#spanID3 { color: Red; }
td#tdID span.spanClass4 { color: Aqua; }
td#tdID span#spanID5 { color: Maroon; }
</style>
</head>
<body>
<table>
<tr>
<td id="tdID" class="tdClass">
<span id="spanID1" class="spanClass1">First</span><br />
<span id="spanID2" class="spanClass2">Second</span><br />
<span id="spanID3" class="spanClass3">Third</span><br />
<span id="spanID4" class="spanClass4">Fourth</span><br />
<span id="spanID5" class="spanClass5">Fifth</span><br />
</td>
</tr>
</table>
</body>
</html>
Above code snippet displays various ways to change nested element styles.
a) span : To change style of a particular html element (span).
b) td > span:first-child : To change style of first child element (span) of an html elemenet (td).
c) td#tdID > span:first-child : To change style of first child element (span) of an html elemenet with ID (td#tdID).
d) td.tdClass > span:first-child : To change style of first child element (span) of an html elemenet with class (td.tdClass).
e) td#tdID span : To change style of a particular child element (span) of an html element with ID (td#tdID).
f) td.tdClass span.spanClass2 : To change style of a child element with class (span.spanClass2) of an html element with class (td.tdClass).
g) td.tdClass span#spanID3 : To change style of a child element with ID (span#spanID3) of an html element with class (td.tdClass).
h) td#tdID span.spanClass4 : To change style of a child element with class (span.spanClass4) of an html element with ID (td#tdID).
i) td#tdID span#spanID5 : To change style of a child element with ID (span#spanID5) of an html element with ID (td#tdID).
_525_526_513.gif)
Posts
No comments:
Post a Comment