Apa arti dari pemilih CSS “+” (tanda tambah)?

Sebagai contoh:

p + p {
  /* Some declarations */
}

Saya tidak tahu apa +artinya. Apa perbedaan antara ini dan hanya mendefinisikan gaya ptanpa + p?

Lihat pemilih yang berdekatan di W3.org.

Dalam hal ini, pemilih berarti bahwa gaya hanya berlaku untuk paragraf langsung setelah paragraf lain.

pPemilih biasa akan menerapkan gaya ke setiap paragraf di halaman.

Ini hanya akan berfungsi pada IE7 atau lebih tinggi. Di IE6, gaya tidak akan diterapkan ke elemen apa pun. Ini juga berlaku untuk >combinator.

Lihat juga ikhtisar Microsoft untuk kompatibilitas CSS di Internet Explorer .

Ini pemilih saudara yang berdekatan.

Dari blog Splash of Style.

Untuk menentukan pemilih yang berdekatan dengan CSS, tanda plus digunakan.

h1+p {color:blue;}

Kode CSS di atas akan memformat paragraf pertama setelah (tidak di dalam) setiap judul h1 sebagai biru.

h1>pmemilih pelemen apa saja yang merupakan anak langsung (generasi pertama) dari suatu h1elemen.

• h1>ppertandingan <h1> <p></p> </h1>( <p>di dalam <h1>)

h1+pakan memilih pelemen pertama yang merupakan saudara kandung (pada tingkat dom yang sama) sebagai h1elemen.

• h1+pcocok <h1></h1> <p><p/>(di <p>sebelah / setelah <h1>)

The +berarti tanda pilih "saudara yang berdekatan"

Misalnya, gaya ini akan berlaku mulai dari yang kedua <p>:

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Contoh

Lihat JSFiddle ini dan Anda akan memahaminya: http://jsfiddle.net/7c05m7tv/ (JSFiddle lain: http://jsfiddle.net/7c05m7tv/70/ )

Dukungan Browser

Selektor saudara yang berdekatan didukung di semua browser modern.

Belajarlah lagi

• http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

"+" adalah pemilih saudara yang berdekatan. Ini akan memilih p APAPUN LANGSUNG SETELAH ap (bukan anak atau orang tua, saudara kandung).

+pemilih disebut Adjacent Sibling Selector.

Misalnya, pemilih p + p, memilih pelemen segera setelah pelemen

Ini dapat dianggap sebagai looking outsidepemilih yang memeriksa elemen segera berikut.

Berikut ini cuplikan sampel untuk memperjelas:

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>

Karena kita adalah satu topik yang sama, ada baiknya menyebutkan pemilih lain, ~pemilih, yaituGeneral Sibling Selector

Misalnya, p ~ pmemilih semua pyang mengikuti ptidak masalah di mana itu, tetapi keduanya pharus memiliki orang tua yang sama.

Begini tampilannya dengan markup yang sama:

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>

Perhatikan bahwa yang terakhir pjuga cocok dalam sampel ini.

Ini akan cocok dengan elemen apa pun pyang berbatasan langsung dengan elemen 'p'. Lihat: http://www.w3.org/TR/CSS2/selector.html

+menyajikan salah satu penyeleksi relatif. Daftar semua penyeleksi relatif:

div p- Semua <p>elemen di dalam <div>elemen dipilih.

div > p- Semua <p>elemen yang induk langsungnya <div>dipilih. Ini bekerja mundur juga ( p < div)

div + p- Semua <p>elemen ditempatkan segera setelah <div>elemen dipilih.

div ~ p- Semua <p>elemen yang didahului oleh <div>elemen dipilih.

Lebih lanjut tentang penyeleksi periksa di sini .

Itu memilih paragraf berikutnya dan indentasi awal paragraf dari kiri seperti yang Anda lakukan di Microsoft Word.

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.

hasil akhir terlihat seperti ini

Plus (+) akan memilih elemen langsung pertama. Ketika Anda menggunakan + selector, Anda harus memberikan dua parameter. Ini akan lebih jelas dengan contoh: di sini div dan span adalah parameter, jadi dalam hal ini hanya rentang pertama setelah div akan ditata.

 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>

Gaya di atas hanya akan berlaku untuk rentang pertama setelah div. Penting untuk dicatat bahwa rentang kedua tidak akan dipilih.

Ini berarti cocok dengan setiap pelemen yang berbatasan langsung

www.snoopcode.com/css/examples/css-adjacent-sibling-selector