web-dev-qa-db-fra.com

Comment référencer un nom de classe long avec des espaces en CSS?

J'essaie de styliser certaines sorties Drupal. En particulier, j'essaie de référencer une classe avec un nom super long (qui comprend des espaces). Je ne suis pas clair sur la syntaxe de cela. Pardonnez-moi, je suis un débutant CSS. Voir:

<article id="node-38" class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix" about="/~actionin/node/38" typeof="sioc:Item foaf:Document">
    <header>
        <h2 property="dc:title" datatype=""><a href="/~actionin/node/38">National Nutrition Month: March 2012: “Get Your Plate in Shape”</a></h2>

Je veux finalement référencer la propriété H2. Je pensais que ce serait quelque chose comme:

.node SOMETHING-HERE .header h2 { declaration; }

Je ne peux pas simplement référencer le nœud, car il est utilisé ailleurs à d'autres fins. Je veux être précis et sélectionner uniquement cette classe:

class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"
htmlcssdrupal
23
Doug

En utilisant des points (.), Vous pouvez combiner plusieurs classes en groupe

.node.node-article.node-teaser.contextual-links-region.node-even.published.with-comments.node-teaser.clearfix {
 ...
}
35
joomlearner

Peut-être que je ne vous donne pas la réponse dont vous avez besoin, mais les noms de classe ne peuvent pas contenir d'espaces.

Un élément peut avoir plusieurs classes, ce qui vous permet de combiner plusieurs règles de style pour différentes classes à appliquer à un seul élément.

Si vous avez des espaces dans un attribut de classe, il crée un élément avec plusieurs classes, délimitées par des espaces.

Par exemple, si vous avez un élément comme celui-ci

<div class="big red outlined"></div>

et vous aviez CSS comme ça

.big {
  width: 1000px;
  height: 1000px;
}

.red {
  color: red;
}

.outlined {
  border: 1px solid black;
}

Les trois styles seraient appliqués à la seule div pour la rendre grande, rouge et délimitée.

Dans votre cas, il semble que vous tentiez d'accéder à un élément spécifique, ce qui est le but de l'attribut id. Notez que le nœud a un identifiant unique:

<article id="node-38">

Vous pouvez accéder à un élément avec un identifiant spécifique en CSS en utilisant le # sélecteur, comme celui-ci

#node-38 {
  //style goes here
}

Dans votre cas, vous voudrez probablement faire quelque chose comme ceci:

#node-38 .header h2 { 
  //style goes here 
}
21
Peter Olson

Ces espaces sont en fait plusieurs classes sur le même élément, donc votre <article> tag a la classe "node" et la classe "node-article", et ainsi de suite.

Donc si vous aviez:

.node { background-color: black; }
.node-article { color: white; }

L'article aurait alors un fond noir et un texte blanc. Les deux seraient appliqués.

N'oubliez pas que vous pouvez référencer des balises et des identifiants, donc pour accéder à votre H2, vous pouvez faire:

article header h2 { .... }

ou

#node-38 header h2 { .... }

Et vous n'avez pas nécessairement besoin de l '"en-tête" là-dedans non plus, selon ce que vous voulez réaliser.

Si vous souhaitez tout sélectionner <h2>s descendants de <article> tags avec la classe "node-article", vous pouvez alors faire ceci:

article.node-article h2
2
joshuahealy
class="node node-article node-teaser contextual-links-region node-even published with-comments node-teaser clearfix"

La ligne ci-dessus contient un total de 9 classes en raison des espaces entre elles. donc, node est une seule classe, node-article est une autre classe et ainsi de suite. Si vous voulez référencer une classe, vous devez l'écrire comme

.node{background-color:red;}

Si vous souhaitez référencer plusieurs classes à la fois et appliquer les mêmes styles, vous pouvez écrire comme

.node, node-article, node-teaser{background-color:red;}

Dans ce cas, trois classes individuelles nodenode-articlenode-teaser aura le même style avec la couleur de fond rouge. Maintenant, si vous avez plusieurs éléments avec la même classe, c'est-à-dire article, alors tous les articles avec la même classe auront le même style. Pour appliquer un style à un élément unique, vous pouvez id au lieu de class comme id = "node-38" et vous pouvez appliquer un style avec CSS à cet élément comme

article#node-38{background-color:red;}

pour sélectionner/référencer l'en-tête intérieur h2 avec l'article de l'élément parent qui a id = "node-38", vous pouvez écrire

article#node-38 header h2{background-color:red;}
1
The Alpha

Lorsque vous définissez un élément avec une classe, y compris les espaces dénote en fait plusieurs classes.

Cet article a en fait les classes suivantes qui lui sont appliquées: node, node-article, node-teaser, contextual-links-region, node-even, published, with-comments, node-teaser et clearfix.

Vous pouvez utiliser n'importe laquelle de ces classes lors du ciblage de l'élément. Si je référençais la balise H2, je ferais quelque chose comme

    article#node-38 header h2{

Il s'agit d'un moyen de ciblage beaucoup plus spécifique que d'utiliser toutes ces classes. c'est une syntaxe plus courte et plus spécifique à l'élément que vous souhaitez styliser.

0
Jesse Rice