Opposite of Adjacent Sibling Selector

Is there a way to do a not adjacent to selector, opposite of the + operator

I think it would be

input:first-child, :not(label) + input {
  color: red;
}

input {  background: red;}input:first-child, :not(label) + input {  background: #0f0;}body > * {  display: block;  width: 100%;}

<input value="Match (first child)" /><label><label></label><span><span></span><input value="Match (immediately follows a non-label)" /><label><label></label><input value="NO match (immediately follows a label)" /><span><span></span>

Is there a previous sibling selector?

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.

CSS3 Selectors: + vs ~ and the opposite of ~?

Is my understanding of the difference correct?

Yes. Selectors L3 defines those two types of sibling combinators (emphasis mine):

• Adjacent sibling combinator

  The adjacent sibling combinator is made of the "plus sign" (U+002B, +)
  character that separates two sequences of simple selectors. The
  elements represented by the two sequences share the same parent in the
  document tree and the element represented by the first sequence
  immediately precedes the element represented by the second one.

• General sibling combinator

  The general sibling combinator is made of the "tilde" (U+007E, ~)
  character that separates two sequences of simple selectors. The
  elements represented by the two sequences share the same parent in the
  document tree and the element represented by the first sequence
  precedes (not necessarily immediately) the element represented by the second one.

How can I select every element placed before (or immediately before) another element?

As explained in Is there a previous sibling selector?, it's not possible to do that with Selectors L3. Selectors L4 may introduce some way to do it, but probably it will only be available in JS (e.g. through querySelector) but not in CSS stylesheets because of performance reasons.

Is there a reverse general siblings CSS selector?

You can't.

CSS stands for Cascading Style Sheet, and it's interpreted from top to bottom. And so is applied its rules.

You can't use CSS to change anything before the selected element. Not the parent, nor the previous siblings.

You'll need to use javascript to implement that functionality.

CSS: How to select only the first non-adjacent sibling after the element

You should use the below setting:

p:hover ~ div ~ div {
    display:none;
}

This would set the display back to none for all div after the first div following the hovered paragraph.

div {  display: none;}p:hover ~ div {  display: block;}p:hover ~ div ~ div {  display: none;}

<p>p1</p><p>p2</p><p>p3</p><div>d1</div><p>p1</p><p>p2</p><p>p3</p><div>d2</div><p>p1</p><p>p2</p><p>p3</p><div>d3</div>

Adjacent sibling selectors in less

Here is a solution:

#block { 
    .tall + p {
        [some attributes] 
    }
}

CSS sibling selector (~) with inverted order

You can't do this with CSS alone. The ~ combinator only looks in one direction and you can only apply styles to the rightmost element in a selector, so simply placing Y before X won't work.

You'll need to use JavaScript to do this.

css adjacent Sibling combinators - complected selecting

I'm not sure this is possible with CSS, but it's quite simple with jQuery:

var $ul = $('a.title', $('ul.flexMenu-popup > li > ul.subnav').parent());

if ($ul.length) {
    alert('yes');
}
else {
    alert('no');
}

Why doesn't the adjacent sibling selector work?

Your html is invalid. p element permitted content is phrasing content. Additional css adjacent sibling selector selects following the rule:

Adjacent sibling selectors have the following syntax: E1 + E2, where
E2 is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2, ignoring non-element nodes (such as text nodes and comments).

in your example element with id #p2 is not immediately precedes h4. You can fix your html and use general sibling selector:

#p2 ~ h4 {  color: red;}

<div>  <p id="p2">This is the sibling of the selected para</p>  <div>    <h4>this should not be colored</h4>  </div>  <h4>this should be colored</h4></div>

---

Related Topics