La hiérarchie des ID et de classe en CSS

Sélecteur de classe

• Un sélecteur de classe vous permet de créer une classe nommée comme bigBOX. Définir les attributs de la classe, comme indiqué dans l'exemple suivant:

  .bigBOX {background-color: border-color Rouge-: Bleu}

  Tout élément de la page référence à la classe bigBOX acquiert un fond rouge et une bordure bleue. L'élément div ci-dessous fait référence à la classe bigBOX:

  Les sélecteurs de classe apparaissent entre une ouverture balise dans un document HTML. Ajouter autant de classes que vous aimez le document.

Sélecteur ID

• Les concepteurs du site ajoutent souvent des attributs d'identité aux éléments de la page. Une pièce d'identité permet à javascript pour accéder et manipuler un élément. L'élément div ci-dessous a un ID dont la valeur est ID1.

  
  
  
  
  

  Directives du W3C exigent noms d'attributs, tels que ID, à apparaître en minuscules. Une fonction javascript pourrait accéder à cette div en exécutant l'instruction suivante.

  var divObject = document.getElementById ("div1").

  Vous avez également la possibilité d'utiliser le nom ID un élément comme un sélecteur CSS. Un sélecteur d'identité peut définir des attributs de la même manière qu'une classe les définit. Placez un signe dièse devant un ID lorsque vous l'utilisez comme un sélecteur CSS.

ID et Hiérarchie des classes

• Beaucoup de concepteurs de sites ajoutent souvent des noms de classes et les ID d'éléments de page Web. Parfois identifiants associés à des éléments ont attributs CSS et d'autres fois ils ne le font pas. Si votre élément a fait référence à une classe CSS et un ID qui a attributs CSS, un conflit peut se produire, comme indiqué dans l'exemple suivant:

  .bigBOX {background-color: border-color Rouge-: Bleu}

  div1 {background-color: border-color Groenland: Blanc}

  Les deux sélecteurs régler les couleurs d'un élément, mais ces couleurs sont différentes. Sauf si vous comprenez la hiérarchie des ID et de la classe, vous ne pouvez pas savoir comment un navigateur peut résoudre ce conflit.

Résolution Hiérarchie

• Quand un élément de navigateur fait référence à un ID et une classe dont les attributs ne sont pas en conflit, le navigateur utilise tous les attributs de style de l'élément. Par exemple, si un ID définit une bordure rouge et une classe définit une police Arial, le navigateur applique les deux styles à l'élément. Si ID et classe définissent la même propriété, les styles de navigateur l'élément en utilisant la valeur de l'attribut de l'ID et ignore celle définie dans le sélecteur de classe. Les concepteurs du site se réfèrent à ce processus de prise de décision de navigateur hiérarchique que la spécificité.