css selecteurs
/Html JavaSript/css/css selecteurs.html
<html>
<head>
<style>
div {background-color : lightgrey;}
.cadre {border:solid 1px black;}
span {color:red;}
p {margin-left:20px; margin-top:5px}
.gras {font-weight:bold;}
.italic {font-style: italic;}
h3 + p {color : green;}
ul.ex1 li {color : green;}
ul.ex2 > li {color : green;}
</style>
</head>
<body>
<div>Plusieur class sur un élément :
<table class="cadre"><tr><td>
.gras {font-weight:bold;}<br>
.italic {font-style:italic;}<br>
</td></tr></table>
<p class="gras italic">p class="<span>gras italic</span>"</p>
</div>
<div>Selecteur "que si suit un elt ..." (IE6 ne supporte pas) :
<table class="cadre"><tr><td>
h3 <span>+</span> p {color : green;}
</td></tr></table>
<h3 style="margin-left:20px; margin-bottom:0px">h3</h3>
<p>p qui suit un h3</p>
<p>p normal</p>
</div>
<div>
Que fils direct (IE6 ne supporte pas) :
<table class="cadre"><tr><td>
ul.ex1 li {color : green;}<br>
ul.ex2 <span>></span> li {color : green;}
</td></tr></table>
<ul class=ex1>
<li>niv1</li>
<ul>
<li>niv2</li>
</ul>
</ul>
<ul class=ex2>
<li>niv1</li>
<ul>
<li>niv2</li>
</ul>
</ul>
</div>
</body>
</html>