Discussion :

[koala19100]

bonjours

Es-ce que je dois mettre une class a chaque balise ou pas (sauf si nécessaire)

.maclass div (juste une class avec une balise)

où je peut mettre

.maclass div p (juste une class avec 2 balises)

donc si vous me dite la class avec une balise suffit pour le css

et mettre une class html à chaque fois nécessaire afin d’éviter de mettre en css laclass avec 2 balise

es ce que c'est bien ça ou c'est autorisé 2 balise sur le css

[danielhagnoul]

Je n'ai pas compris cette explication, un petit exemple (codes CSS et HTML) illustrant votre propos serait le bienvenu.

Un sélecteur CSS peut être très simple ou très complexe selon les besoins.

En général, un sélecteur trop complexe (plus de trois éléments dans le sélecteur) est souvent la conséquence d'une erreur de conception.

[JefReb]

Oui, un petit exemple serait le bienvenue.
Pour ma part, je pense qu'il faut utiliser les classes le moins possible quand on peut.
En jouant sur parent > enfant, quelquefois cela est plus clair dans le CSS.
Il faut aussi lire les tutoriels sur les css,
car

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.maclass { ...}
div.maclass { ...}
div.maclass p { ...}
p.maclass { ...}

L'interprétation par le navigateur sera complètement différent ...

[koala19100]

le resultat sera le même dans les 3 cas

1 er cas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol>	 
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  header li
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

2 eme cas :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol class="header">	 
	  <li class="icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  .header li
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

3 éme cas

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
 
      <!--Début du header-->
	  <header>	  
	  <h1>cadre</h1>	  
	  <nav><ol>	 
	  <li class="header icon-accueil" title="header accueil"><a href="" title="Portail">portail</a></li>
	  <li class="header icon-forum" title="header forum"><a href="" title="Forum">forum</a></li>
	  <li class="header icon-inscription" title="header Inscription"><a href="" title="Inscription">inscription</a></li>
	  <li class="header icon-connexion" title="header connexion"><a href="" title="Connexion">connexion</a></li>
	  <li class="header icon-rechercher" title="header rechercher"><a href="" title="Rechercher">rechercher</a></li>
	  <li class="header icon-faq" title="header faq"><a href="" title="Faq">faq</a></li>
	  <li class="header icon-concours" title="header Concours"><a href="" title="Concours">concours</a></li>
	  <li class="header icon-mini-chat" title="header twitter"><a href="" title="Mini-chat">mini-chat</a></li>
	  <li class="header icon-facebook" title="header facebook"><a href="" title="Facebook">facebook</a></li>
	  <li class="header icon-twitter" title="header twitter"><a href="" title="Twitter">twitter</a></li>
	  </ol></nav>
      </header>
	  <!--Fin du header-->

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
	  header
	  {
	  border:#CCCCCC 1px solid;
	  }
	  header h1
	  {
	  border-bottom:#CCCCCC 1px solid;
	  }
 
	  .header
	  {
	  border-right:#CCCCCC 1px solid;
	  padding:1em;
	  float:left;
	  }

à votre avis c'est mieux lequelle

[Invité]

Bonjour,

on ne comprend toujours... rien...

On met ce qui est nécessaire et suffisant.
Point.
De préférence, on simplifie au maximum... comme tu l'as fait dans le 1er cas.
Donc, pas utile de mettre des classes superflues.

Sinon, on peut aussi cibler de façon précise et UNIQUE avec un identifiant <balise id="...">.

Ou, si tu as d'autres <li> dans ton header (autres que ceux du menu), tu cibles UNIQUEMENT ceux du menu avec :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

header > nav > li { ... }

La règle essentielle à retenir : SIMPLICITE.

A LIRE, aussi :

• Règles d'application des styles CSS et gestion des conflits

[koala19100]

par exemple

https://fiddle.jshell.net/7oqzh3ac/1/

et

https://fiddle.jshell.net/xhk1oudc/

es-ce que c'est bon où pas

merci