En CSS, quelle est la différence entre "." et "#" pour déclarer un ensemble de styles ?

Question

Quelle est la différence entre # y . lors de la déclaration d'un ensemble de styles pour un élément et quelle est la sémantique qui entre en jeu pour décider lequel utiliser ?

Answer 1

Oui, ils sont différents...

# est un sélecteur d'identité utilisé pour cibler un simple spécifique avec un identifiant unique, mais . est une sélecteur de classe utilisé pour cibler multiple éléments avec une classe particulière. Pour le dire autrement :

• #foo {} donnera un style à la simple déclaré avec un attribut id="foo"
• .foo {} style will tous avec un attribut class="foo" (vous pouvez également avoir plusieurs classes affectées à un élément, il suffit de les séparer par des espaces, par exemple. class="foo bar" )

Utilisations typiques

En règle générale, vous utilisez # pour styliser quelque chose dont vous savez qu'il n'apparaîtra qu'une seule fois, par exemple, les divs de mise en page de haut niveau comme les barres latérales, les zones de bannière, etc.

Les classes sont utilisées lorsque le style est répété, par exemple si vous utilisez une forme spéciale d'en-tête pour les messages d'erreur, vous pourriez créer un style h1.error {} qui ne s'appliquerait qu'à <h1 class="error">

Spécificité

Les sélecteurs diffèrent également par leur spécificité : un sélecteur d'identifiant est considéré comme plus spécifique qu'un sélecteur de classe. Cela signifie que lorsque les styles conflit sur un élément, celles définies avec le sélecteur le plus spécifique prévaudront sur les sélecteurs moins spécifiques. Par exemple, avec <div id="sidebar" class="box"> des règles pour #sidebar avec la possibilité de passer outre les règles conflictuelles pour .box

En savoir plus sur les sélecteurs CSS

Véase Selectutorial pour obtenir d'autres excellents guides sur les sélecteurs CSS - ils sont incroyablement puissants et si votre conception est simplement que "# est utilisé pour les DIV", vous feriez bien de vous documenter sur la manière exacte d'utiliser CSS plus efficacement.

EDIT : On dirait que Selectutorial est parti sur le grand site web dans le ciel, donc essayez ceci lien vers les archives à la place.

Answer 2

En # signifie qu'il correspond à la id d'un élément. Le site . signifie le nom de la classe :

<div id="myRedText">This will be red.</div>
<div class="blueText">this will be blue.</div>

#myRedText {
    color: red;
}
.blueText {
    color: blue;
}

Notez que dans un document HTML, l'attribut id doit être unique Par conséquent, si plusieurs éléments ont besoin d'un style spécifique, vous devez utiliser un nom de classe.

Answer 3

Le point ( . ) signifie un classe tandis que le hachage ( # ) signifie un élément avec un id attribut. La classe s'appliquera à tout élément décoré avec cette classe particulière, tandis que le style # s'appliquera uniquement à l'élément avec cet id particulier.

Nom de la classe :

<style>
   .class { ... }
</style>

<div class="class"></div>
<span class="class></span>
<a href="..." class="class">...</a>

Élément nommé :

<style>
   #name { ... }
</style>

<div id="name"></div>

Answer 4

Il convient également de noter que dans le cascade , un id ( # ) est plus spécifique qu'un b ( . ). Par conséquent, les règles de l'instruction id prévaudront sur celles de l'instruction class.

Par exemple, si les deux déclarations suivantes :

.headline {
  color:red;
  font-size: 3em;
}

#specials {
  color:blue;
  font-style: italic;
}

sont appliquées au même élément HTML :

<h1 id="specials" class="headline">Today's Specials</h1>

el couleur : bleu l'emporte sur la règle couleur : rouge règle.

Answer 5

Deux petites extensions sur ce qui a déjà été dit...

Un site id doit être unique, mais vous pouvez utiliser le même identifiant pour rendre les différents styles plus spécifiques.

Par exemple, étant donné cet extrait HTML :

<div id="sidebar">
    <h2>Heading</h2>
    <ul class="menu">
        ...
    </ul>
</div>
<div id="content">
    <h2>Heading</h2>
    ...
</div>
<div id="footer">
    <ul class="menu">
        ...
    </ul>
</div>

Vous pouvez appliquer différents styles avec ceux-ci :

#sidebar h2
{ ... }

#sidebar .menu
{ ... }

#content h2
{ ... }

#footer .menu
{ ... }

Une autre chose utile à savoir : vous pouvez avoir plusieurs classes sur un élément, en les délimitant par des espaces...

<ul class="main menu">...</ul>
<ul class="other menu">...</ul>

Ce qui vous permet d'avoir un style commun dans .menu avec des styles spécifiques en utilisant .main.menu y .sub.menu

.menu
{ ... }

.main.menu
{ ... }

.other.menu
{ ... }