web-dev-qa-db-ja.com

"+"（プラス記号）CSSセレクターとはどういう意味ですか？

例えば：

p + p {
  /* Some declarations */
}

+の意味がわかりません。これと+ pなしでpのスタイルを定義することの違いは何ですか？

csscss-selectors
695
gday

このセレクタは、スタイルが別の段落の直後の段落にのみ適用されることを意味します。
普通のpセレクタはページ内の各段落にスタイルを適用します。

W3.orgの 隣接するセレクタ を参照してください。

これはIE7以上でのみ動作します。 IE6では、スタイルはどの要素にも適用されません。ちなみにこれは>コンビネータにも当てはまります。

Internet ExplorerにおけるCSSの互換性については、Microsoftの概要も参照してください 。

713
Thorarin

それは隣接兄弟セレクターです。

From Splash of Styleブログ。

CSS隣接セレクタを定義するには、プラス記号を使用します。

h1+p {color:blue;}

上記のCSSコードは、h1見出しの後（内側ではない）の最初の段落を青にフォーマットします。

h1>pは、h1要素の直接（第1世代）の子（内部）であるすべてのp要素を選択します。

  • h1>pは<h1><p></p></h1>（<p>の内側の<h1>）に一致します

h1+pは、兄弟である（domの同じレベルにある）最初のp要素をh1要素として選択します。

  • h1+pは<h1></h1><p><p/>（<p>の前後の<h1>）と一致します
192
Matthew Vines

+記号は、adjacent siblingを選択することを意味します。

例：

_ css _ 

p + p
{
   font-weight: bold;
}

_ html _

スタイルは2番目の<p>から適用されます

<div>
   <p></p>
   <p></p>
</div>

例

これを参照してくださいFiddleそしてあなたはそれを永遠に理解するでしょう： http://jsfiddle.net/7c05m7tv/ （もう一つのFiddle： http://jsfiddle.net/7c05m7tv/70/ / ）

ブラウザのサポート

隣接兄弟セレクタは、Internet Explorer 5.x Macintoshでサポートされています。それらは、Netscape 6プレビューリリース1（それが利用可能なすべての無数のプラットフォーム用）、およびOpera 4 for Windowsのプレビューリリース3でもサポートされています。 Windows用IE5、およびWindows用Opera 3には、隣接兄弟セレクタの処理にバグがあります。

知っておくと良いこと： Internet Explorer 7では、セレクタに一致する要素の前に要素が動的に配置されていると、スタイルが正しく更新されません。 Internet Explorer 8では、リンクをクリックして要素を動的に挿入した場合、リンクがフォーカスを失うまで最初の子スタイルは適用されません。

もっと詳しく知る

52
Cas Bloem

"+"は隣接する兄弟セレクタです。 pの後に直接pを選択します（ただし、子でも親でも、兄弟ではありません）。

41
Gordon Gustafson

+セレクタはAdjacent Sibling Selectorと呼ばれます。

たとえば、セレクタp + pは、p要素の直後にあるp要素を選択します。

それはすぐ後に続く要素をチェックするlooking outsideセレクタと考えることができます。

より明確にするためのサンプルスニペットは次のとおりです。

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

私たちは同じトピックなので、別のセレクター~selectorについて言及する価値があります。それはGeneral Sibling Selectorです。

たとえばp ~ pは、pに続くすべてのpを選択します。場所は関係ありませんが、両方のpは同じ親を持つ必要があります。

これは、同じマークアップを使用した場合の外観です。

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

このサンプルでは、​​最後のpも一致しています。

23
Lijo Joseph

要素 'p'のすぐ隣にある要素pにマッチします。参照してください： http://www.w3.org/TR/CSS2/selector.html

10
Michael Morton

+は、相対セレクタの1つを表します。すべての相対セレクターのリスト

div p - <p>要素内のすべての<div>要素が選択されています。

div > p - 直接の親が<p>であるすべての<div>要素が選択されています。逆方向にも動作します（p < div）

div + p - すべての<p>要素は、<div>要素が選択された直後に配置されます。

div ~ p - 先頭に<p>要素があるすべての<div>要素が選択されます。

セレクターについての詳細は ここ をチェックしてください。

7
Nesha Zoric

Microsoft Wordの場合と同じように、次の段落を選択し、段落の先頭を左からインデントします。

2
flo

プラス（+）は最初の即値要素を選択します。 +セレクタを使うときは、2つのパラメータを与えなければなりません。これは例でより明確になります。ここでdivとspanはパラメータなので、この場合はdivの後の最初のスパンだけがスタイルされます。

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

上記のスタイルは、divの後の最初のスパンにのみ適用されます。セカンドスパンは選択されないことに注意することが重要です。

1
user6142140
p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

最終的な出力はこのようになります

enter image description here

1
IMRA