p.example{
margin:0;
padding:10px;
color:#000;
}
p.example[title^="ess"]{
color:#fff;
background:#333;
}
<p class="example"> je n'ai pas d'attribut title</p>
<p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p>
<p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p>
<p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p>
je n'ai pas d'attribut title
j'ai un attribut title mais il ne commence pas par "ess"
j'ai un attribut title commençant par "ess"
j'ai un attribut title commençant par "ess" également
p.example2{
margin:0;
padding:10px;
color:#000;
}
p.example2[title$="sai"]{
color:#fff;
background:#045FB4;
}
<p class="example2"> je n'ai pas d'attribut title</p>
<p class="example2" title="comment"> j'ai un attribut title mais il ne finit pas par "sai"</p>
<p class="example2" title="essai"> j'ai un attribut title finissant par "sai"</p>
<p class="example2" title="esson"> j'ai un attribut title finissant par "sai" également</p>
je n'ai pas d'attribut title
j'ai un attribut title mais il ne commence pas par "ess"
j'ai un attribut title commençant par "ess"
j'ai un attribut title commençant par "ess" également
p.example3{
margin:0;
padding:10px;
color:#000;
}
p.example3[title*="val"]{
color:#fff;
background:#990000;
}
<p class="example3"> je n'ai pas d'attribut title</p>
<p class="example3" title="comment"> j'ai un attribut title mais il ne contient pas "val"</p>
<p class="example3" title="val"> j'ai un attribut title contenant au moins "val"</p>
<p class="example3" title="evaluer"> j'ai un attribut title contenant au moins "val" également</p>
<p class="example3" title="eval"> j'ai un attribut title contenant au moins "val" également</p>
je n'ai pas d'attribut title
j'ai un attribut title mais il ne contient pas "val"
j'ai un attribut title contenant au moins "val"
j'ai un attribut title contenant au moins "val" également
j'ai un attribut title contenant au moins "val" également
.example4 div{
margin:0;
padding:10px;
color:#000;
}
.example4 div~p{
color:#fff;
margin:20px;
width:200px;
padding:5px;
border:1px solid #333;
background:#006644;
}
<div class="example4">
<div>je suis l'élément particulier div</div>
<p> je suis un p qui suit le div (l'éléent particulier)</p>
<p>je suis un p qui suit le div (l'élément particulier)</p>
<span>je suis un span</p>
<p>je suis un p qui ne suit pas le div (l'élément particulier)</p>
</div>
je suis un p qui suit le div (l'élement particulier)
je suis un p qui suit le div (l'élement particulier)
je suis un spanje suis un p qui ne suit pas le div (l'élement particulier)
.exampleTable{
width:100%;
border:1px solid #444;
}
.exampleTable tr:nth-child(even){ /*tous les enfants aux numéros pairs*/
background:#999999;
text-shadow: 2px 2px 5px #111;
color:#fff;
}
.exampleTable tr:nth-child(odd){ /*tous les enfants aux numéros impairs*/
background:#990000;
color:#fff;
}
.exampleTable tr:nth-child(3n){ /*tous les 3 enfants*/
background:#045FB4;
color:#fff;
}
.exampleTable tr:nth-child(7){ /*l'enfant numéro 7*/
background:#006400;
text-shadow: 2px 2px 2px #fff;
color:#000;
}
<table class="exampleTable">
<tr>
<td>1ere ligne</td>
</tr>
<tr>
<td>2eme ligne</td>
</tr>
<tr>
<td>3eme ligne</td>
</tr>
<tr>
<td>4eme ligne</td>
</tr>
<tr>
<td>5ere ligne</td>
</tr>
<tr>
<td>6eme ligne</td>
</tr>
<tr>
<td>7eme ligne</td>
</tr>
<tr>
<td>8eme ligne</td>
</tr>
</table>
| 1ere ligne |
| 2eme ligne |
| 3eme ligne |
| 4eme ligne |
| 5ere ligne |
| 6eme ligne |
| 7eme ligne |
| 8eme ligne |
.exampleTable2{
width:100%;
border:1px solid #444;
}
.exampleTable2 tr:nth-last-child(odd){ /*tous les enfants aux numéros impairs depuis la fin*/.
background:#990000;
color:#fff;
}
.exampleTable2 tr:nth-last-child(-n+2){ /*les 2 derniers enfants*/
background:#045FB4;
color:#fff;
}
.exampleTable2 tr:nth-last-child(7){ /*l'enfant numero 7 en partant de la fin donc la 2eme ligne du tableau*/
background:#006400;
text-shadow: 2px 2px 2px #fff;
color:#000;
}
<table class="exampleTable2">
<tr>
<td>1ere ligne</td>
</tr>
<tr>
<td>2eme ligne</td>
</tr>
<tr>
<td>3eme ligne</td>
</tr>
<tr>
<td>4eme ligne</td>
</tr>
<tr>
<td>5ere ligne</td>
</tr>
<tr>
<td>6eme ligne</td>
</tr>
<tr>
<td>7eme ligne</td>
</tr>
<tr>
<td>8eme ligne</td>
</tr>
</table>
| 1ere ligne |
| 2eme ligne |
| 3eme ligne |
| 4eme ligne |
| 5ere ligne |
| 6eme ligne |
| 7eme ligne |
| 8eme ligne |