Как ссылаться на длинное имя класса с пробелами в CSS?

Я пытаюсь создать некоторый вывод Drupal. В частности, я пытаюсь ссылаться на класс с супер длинным именем (включая пробелы). Я не понимаю синтаксис этого. Простите меня, я новичок в CSS. См:

<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>

В конечном итоге я хочу ссылаться на свойство H2. Я думал, что это будет что-то вроде:

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

Я не могу просто ссылаться на node, поскольку он используется в других местах для других целей. Я хочу быть конкретным и выбирать только этот класс:

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

ОТВЕТЫ

Ответ 1

Используя точки (.), вы можете объединить несколько классов в группу

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

Ответ 2

Возможно, я не даю вам ответ, который вам нужен, но имена классов не могут содержать пробелы.

Элемент может иметь несколько классов, что позволяет сочетать несколько правил стилизации для разных классов применительно к одному элементу.

Если в атрибуте класса есть пробелы, он создает элемент с несколькими классами, ограниченный пробелами.

Например, если у вас есть такой элемент

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

и у вас был CSS, как этот

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

.red {
  color: red;
}

.outlined {
  border: 1px solid black;
}

Все три стиля будут применены к одиночному div, чтобы сделать его большим, красным и обрисованным.

В вашем случае похоже, что вы пытаетесь получить доступ к определенному элементу, что и является целью атрибута id. Обратите внимание, что node имеет уникальный идентификатор:

<article id="node-38">

Вы можете получить доступ к элементу с определенным идентификатором в CSS с помощью селектора #, например

#node-38 {
  //style goes here
}

В вашем случае вы, вероятно, захотите сделать что-то вроде этого:

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

Ответ 3

Эти пространства эффективно представляют собой несколько классов для одного элемента, поэтому тэг <article> имеет класс "node" и "node -article" и т.д. и т.д.

Итак, если у вас есть:

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

Тогда в статье будет черный фон и белый текст. Оба будут применены.

Также помните, что вы можете ссылаться на теги и идентификаторы, поэтому, чтобы добраться до вашего H2, вы могли бы сделать:

article header h2 { .... }

или

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

И вам не обязательно нужен "заголовок" там, в зависимости от того, чего вы хотите достичь.

Если вы хотите выбрать все <h2>, которые являются потомками тегов <article>, с классом "node -article", вы можете сделать это:

article.node-article h2

Ответ 4

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

В верхней строке содержится всего 9 классов из-за пробелов между ними. поэтому node - это один класс, node-article - другой класс и т.д. Если вы хотите ссылаться на класс, тогда вы должны написать его как

.node{background-color:red;}

Если вы хотите сразу ссылаться на несколько классов и хотите применить одинаковые стили, вы можете написать как

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

В этом случае три отдельных класса node node-article node-teaser будут иметь тот же стиль, что и красный цвет фона. Теперь, если у вас есть несколько элементов с одним классом i.e. article, тогда вся статья с тем же классом будет иметь тот же стиль. Чтобы применить стиль к уникальному элементу, вы можете id вместо class, например id = "node -38", и вы можете применить стиль с CSS к этому элементу, например

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

чтобы выбрать/ссылаться на внутренний заголовок h2 с родительским элементом, который имеет id = "node -38", вы можете написать

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

Ответ 5

Когда вы определяете элемент с классом, включая пробелы, фактически обозначает несколько классов.

В этой статье используются следующие классы: node, node -article, node -teaser, contextual-links-region, node -even, published, with-comments, node -teaser и clearfix.

Вы можете использовать любой из этих классов при таргетинге на элемент. Если бы я ссылался на тег H2, я бы сделал что-то вроде

    article#node-38 header h2{

Это гораздо более конкретный способ настройки, чем использование всех этих классов. это более короткий синтаксис и более конкретный элемент, который вы хотите стилизовать.