What does + mean in CSS? [duplicate]

by

+ is the adjacent sibling combinator.

That means the selector h2 + p only selects the p that comes immediately after an h2.

An illustration:

<h2>Headline!</h2>
<p>The first paragraph.</p>  <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p>      <!-- Not selected [3] -->
</blockquote>

What’s selected and what’s not:

  1. Selected
    This p comes right after the first h2.

  2. Not selected
    This p occurs after the first p as opposed to the h2. Since it doesn’t immediately follow the h2, it’s not selected.

    However, since it still follows the h2 element, just not immediately, the selector h2 + p won’t match this element, but h2 ~ p will, using the general sibling combinator instead.

  3. Not selected
    This p is located within a blockquote, and there’s no h2 before it inside the quote to satisfy its selector.

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Can CSS detect the number of children an element has?
  3. How do I select the “last child” with a specific class name in CSS? [duplicate]
  4. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  5. How to combine class and ID in CSS selector?
  6. :first-child not working as expected
  7. What is the difference between :first-child and :first-of-type?
  8. Does CSS have a :blur selector (pseudo-class)?
  9. Specify multiple attribute selectors in CSS
  10. Should I use single or double colon notation for pseudo-elements?
  11. How to make Internet Explorer 8 to support nth child() CSS element?
  12. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  13. Why use an attribute selector to match classes?
  14. Is it possible to use a CSS wildcard in the middle of an attribute selector?
  15. CSS selector to get deepest element of specific class in the HTML tree
  16. CSS Specificity and Inheritance
  17. Vertically centering content of :before/:after pseudo-elements
  18. Difference between the selectors div + p (plus) and div ~ p (tilde)
  19. Are CSS selectors case-sensitive?
  20. How do I target elements with an attribute that has any value in CSS?
  21. CSS combinator precedence?
  22. What is caret symbol ^ used for in css when selecting elements?
  23. nth-child for every two table rows
  24. Why are my CSS properties being overridden/ignored?
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. CSS specificity or inheritance?
  27. Can I target all tags with a single selector?
  28. What CSS selector can be used to select the first div within another div
  29. CSS Selector for not a child of element type?
  30. CSS selector based on width?

Leave a Comment