web-dev-qa-db-ja.com

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

ノードは他の目的で他の場所で使用されるため、単にノードを参照することはできません。具体的には、このクラスのみを選択します。

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

ドット（。）を使用すると、複数のクラスをグループとして組み合わせることができます

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

たぶん私はあなたに必要な答えを与えていませんが、クラス名にスペースを含めることはできません。

要素には複数のクラスを含めることができます。これにより、異なるクラスの複数のスタイリングルールを組み合わせて単一の要素に適用できます。

クラス属性にスペースがある場合、スペースで区切られた複数のクラスを持つ要素が作成されます。

たとえば、次のような要素がある場合

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

そして、あなたはこのようなCSSを持っていました

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

.red {
  color: red;
}

.outlined {
  border: 1px solid black;
}

3つのスタイルはすべて1つのdivに適用され、大きく、赤く、輪郭が描かれます。

あなたの場合、特定の要素にアクセスしようとしているように見えます。これがid属性の目的です。ノードには一意のIDがあることに注意してください。

<article id="node-38">

このように、#セレクターを使用して、CSSの特定のIDを持つ要素にアクセスできます。

#node-38 {
  //style goes here
}

あなたの場合、おそらく次のようなことをしたいでしょう：

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

これらのスペースは事実上、1つの要素上の複数のクラスであるため、<article>タグには「node」クラス、「node-article」クラスなどがあります。

あなたが持っている場合：

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

その場合、記事の背景は黒になり、テキストは白になります。両方が適用されます。

また、タグとIDを参照できるので、H2にアクセスするには次のようにします。

article header h2 { .... }

または

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

また、達成したい内容によっては、そこに「ヘッダー」も必ずしも必要ではありません。

「node-article」クラスを持つ<h2>タグの子孫であるすべての<article>sを選択する場合、これを行うことができます。

article.node-article h2
2
joshuahealy
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;}

その場合、3つの個別のクラスnodenode-articlenode-teaserは、背景色が赤の同じスタイルになります。同じクラスの複数の要素、つまりarticleがある場合、同じクラスのすべての記事は同じスタイルになります。スタイルを一意の要素に適用するには、id = "node-38"のようなidの代わりにclassを使用し、CSSを使用してスタイルをこの要素に適用できます。

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

id = "node-38"を持つ親要素articleを持つh2内部ヘッダーを選択/参照するには、次のように記述できます。

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

クラスを含む要素を定義する場合、スペースを含めると実際には複数のクラスを示します。

その記事には、実際に次のクラスが適用されています：node、node-article、node-teaser、contextual-links-region、node-even、published、with-comments、node-teaser、clearfix。

要素をターゲットにするときに、これらのクラスのいずれかを使用できます。 H2タグを参照している場合は、次のようにします

    article#node-38 header h2{

これは、これらすべてのクラスを使用するよりもはるかに具体的なターゲット方法です。これは短い構文であり、スタイルを設定する要素により固有です。

0
Jesse Rice