ID :
un identifiant est unique par site il se nomme dans le HTML de la manière suivante :
<![CDATA[
id="testid"
]]>
Dans le CSS l'ID s'appelle par # et son nom
<![CDATA[
#testid {
background-color: lightgreen;}
]]>
Cumque explicabo veniam facere ad!
Class :
une class peut etre présente plusieurs fois dans le site elle se nomme dans le HTML de la manière suivante :
<![CDATA[
class ="testclass"
]]>
Dans le CSS la class s'appelle par . et son nom
<![CDATA[
.testclass {
background-color: #B3B4FF;}
]]>
Exemple sur plusieurs paragraphes:
<![CDATA[
<p class ="testclass" >Lorem ipsum dolor sit amet.</p>
<p class ="testclass">Ratione impedit, laboriosam unde. Molestiae.</p>
<p>Voluptatibus, vitae, minus. Sit, quo.</p>
<p class ="testclass">Nemo aliquam ad consequuntur laudantium.</p>
]]>
Lorem ipsum dolor sit amet.
Ratione impedit, laboriosam unde. Molestiae.
Voluptatibus, vitae, minus. Sit, quo.
Nemo aliquam ad consequuntur laudantium.
Les différents sélecteurs CSS
<![CDATA[ p{}]]> Tout les paragraphes de la page
<![CDATA[ h2{}]]> Tout les h2 de la page
<![CDATA[ section p{}]]> Tout les paragraphes de la section
<![CDATA[ section p, h2{}]]> Tout les paragraphes de la section ET (,) tout les h2 de la page
<![CDATA[ section p, section h2{}]]> Tout les paragraphes de la section ET (,) tout les h2 de la section
<![CDATA[ body>p ]]> Les enfants directs p du body
<![CDATA[
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<div>
<p>Paragraph 3</p>
</div>
<article>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</article>
</body>
]]>
Allez plus loin : Les sélecteurs CSS
