CSS Selector If Exist Adjacent Sibling

CSS: Select element only if a later sibling exists

A neat little trick

You can achieve what you want by using a trick to check if the <section> element is the only element in <main>. This will not work, if there are any other elements there. In your case it should work like this (http://jsfiddle.net/Ljm323qb/2/):

section {
     max-width: 500px;
}
/* The STAR of the show */
section:only-child {
     max-width: 1000px;
}

As illustrated in this codepen: http://codepen.io/omarjuvera/pen/ByXGyK?editors=110

General stuff on Sibling Selectors

There's the + selector which would select a sibling that comes right after the element (https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)

And there's the ~ selector which selects all following siblings (https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors)

You could achieve it by putting the <aside> element before the <section> element and using a sibling selector.

Here's an example: http://jsfiddle.net/Ljm323qb/1/

A quick look in the future
Soon this will be possible, with a new :has pseudo class (http://dev.w3.org/csswg/selectors-4/#relational)

You'll be able to call something like main:has(> aside) > section { ... } but we'll have to wait for that, unfortunately :(

CSS selector if exist adjacent sibling

It is possible to place the span before the div in the html, and then position it with css.

Then use a css adjacent sibling selector to select the div adjacent to the span.

Finally put a position absolute on the span, and give it a top:..px to get it below the div.

So you get the following:

span + div {  background-color:red;}

<td>   <span class="field-validation-error" data-valmsg for="MyObj.PropertyName">blah blah</span>   <div class="t-numerictextbox">    <div class="t-formatted-value">$0.00</div>    <input id="MyObj_PropertyName" class="t-input" name="MyObj.PropertyName">  </div>        </td>

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.

Adjacent sibling selector element.querySelector(+element) is invalid

On one hand, on non-ancient browsers, you can use :scope to indicate the element on which the querySelector is being called on. But querySelector will only select elements which are children of the current element, and the <ul> you want is a sibling.

Take the nextElementSibling of the element instead, check that it exists, and check that it's a ul instead:

for (const menu of document.querySelectorAll("nav div > a")) {  menu.addEventListener("mouseenter", function() {    console.log(menu, menu.nextElementSibling);        const subMenu = menu.nextElementSibling;    if (!subMenu || !subMenu.matches('ul')) {      return;    }
    if (subMenu.style.display === "block") {      console.log("subMenu.style.display === block");      const subMenuBox = subMenu.getBoundingClientRect();      const posX = (subMenuBox.left + subMenuBox.width) - window.innerWidth;      subMenu.style.left = -posX;      console.log("When here successfully!");    } else {      console.log("Failed...");    }  })}

body {  color: #fff;  font-size: 20px;  background: #999;  margin: 0;}
a {  color: #cfc;}
nav,nav div>a,nav div {  float: left;}
nav {  width: 100%;  background: #4169E1;  white-space: nowrap;}
nav div {  margin: 0em 0.2em;}
nav div:first-child {  margin-left: 0;}
nav div div {  position: relative;  margin: 0;}
nav a {  color: #cff;  display: block;  font-weight: 600;  text-decoration: none;  padding: 0.5em 1em;}
nav a:hover {  color: #fff;  background: #f90;}
nav div>a+ul {  position: absolute;  top: 2.15em;  float: left;  background: #666;  list-style-type: none;  margin: 0;  padding: 0;  min-width: 180px;  display: none;}
nav div:hover>a+ul {  display: block;}
.right {  float: right;}

<nav>  <div>    <a href="#A1">Menu A.1</a>    <a href="#A2">Menu A.2</a>  </div>  <div class="right">    <div>      <a href="#B1">Menu B.1</a>      <ul>        <li><a href="#B1.1">B.1 Sub 1</a></li>        <li><a href="#B1.2">B.1 Sub 2</a></li>      </ul>    </div>    <div>      <a href="#B2">Menu B.2</a>      <ul>        <li><a href="#B2.1 ">B.2 Sub 1</a></li>        <li><a href="#B2.2 ">B.2 Sub 2</a></li>      </ul>    </div>    <div>      <a href="#B3 ">Menu B.3</a>      <ul>        <li><a href="#B3.1 ">B.3 Sub 1 Test Longer Text</a></li>        <li><a href="#B3.2 ">B.3 Sub 2</a></li>      </ul>    </div>    <div>      <a href="#B4 ">Menu B.4</a>      <ul>        <li><a href="#B4.1 ">B.4 Sub 1</a></li>        <li><a href="#B4.2 ">B.4 Sub 2</a></li>      </ul>    </div>  </div></nav>
<div style="float: left; margin-top: 1000px "></div>

There is no parent and before sibling css selector so what I'm supposed to do?

The javascript is pretty straightforward. Give the anchor you want an id (I've called it 'hoverme')

<section>
  <div>On a hover change css here</div>
  <a id="hoverme">Hover me</a>
</section>

Add a class to cover styling the div (e.g. this)

<style>
  .hoverdiv {
    color:red;
  }
</style>

Then just add a couple of event listeners to the anchor at the window.onload event like this:

<script>
  window.addEventListener('load', (event) => {
    const anchor=document.querySelector('#hoverme');
    anchor.addEventListener('mouseover', (event) => {
      event.target.parentElement.querySelector('div').classList.add('hoverdiv');
    });
    anchor.addEventListener('mouseout', (event) => {
      event.target.parentElement.querySelector('div').classList.remove('hoverdiv');
    });
  });
</script>

CSS: first and last adjacent siblings of class

I think this might help, I added a not-selected class and targeted the adjacent selected element

.selected{  background-color: #b7dafd;}span{  float: left;  padding: 10px;  position: relative;}.not-selected+.selected{  border-radius: 20px 0 0 20px;  padding-left: 25px;}.selected+.not-selected:before{  content: '';  display: block;  position: absolute;  left:0;  top: 0;  height: 100%;  border-right: 20px solid #b7dafd;  border-radius: 0 20px 20px 0;}

<div class="row">    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->    <span class="selected">3</span> <!-- Should be gray -->    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->    <span class="selected">3</span> <!-- Should be gray -->    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->    <span class="not-selected">.</span>    <span class="not-selected">.</span>    <span class="not-selected">.</span></div>

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