CSS Selector for Adjacency

CSS Select 3rd adjacent element

no need to consider the parent element, simply use sibling selector like below

a[href*="/view/12345"] + * + div

This will simply select the next div after the next element after your link with its href. This will be your third child considering the fact that your link will always be the first.

a[href*="/view/12345"] + * + div {

  color:green

}

<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">

  <a href="/products/units/view/12345">...</a>

  <div class="p-4 pb-0">

    <h2 class="text-lg font-semibold">...</h2>

    <div class="mt-4 my_content border-b">

      ...

    </div>

  </div>

  <div class="flex w-full p-4">

    <div class="flex-none my-auto my_custom_text">

      STYLE ME GREEN

    </div>

  </div>

</div>

<div class="w-full rounded-lg shadow-md overflow-hidden bg-white text-gray-800 pb-4">

  <a href="/products/units/view/12945">...</a>

  <div class="p-4 pb-0">

    <h2 class="text-lg font-semibold">...</h2>

    <div class="mt-4 my_content border-b">

      ...

    </div>

  </div>

  <div class="flex w-full p-4">

    <div class="flex-none my-auto my_custom_text">

      DON'T STYLE ME

    </div>

  </div>

</div>

CSS selector for adjacent elements

You can't.

CSS has no selector / combinator that expresses "contains" so you cannot say "A span adjacent to a span which contains an input that is invalid".

The proposed subject feature of Selectors Level 4 will allow you to select elements other than the last one that appears in the selector, but (AFAIK) not let you go up and then down.

Is there a selector (or any way around) for Adjacent Until... in CSS?

One hacky idea is to increase the specifity of each selector consider the previous color-sheme before it. So the more color-sheme we have before the more the selector will be specific thus it will win the one before it.

Of course, you will need to write many CSS rules depending on how many section you will have. You can consider SASS/LESS to easily generate the code:

.section {

    height: 15em;

    background: white;

    font-family: sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    color: red;

}

.color-scheme--violet-red ~ .section,

[class*="color-scheme" ] ~ .color-scheme--violet-red ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ]  ~ .color-scheme--violet-red ~ .section{

    background-image: linear-gradient(to right, purple 0%, red 100%);

    color: white;

}

.color-scheme--clear ~ .section,

[class*="color-scheme" ] ~ .color-scheme--clear ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section,

[class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~ [class*="color-scheme" ] ~.color-scheme--clear ~ .section{

    background: white;

    color: red;

}

<section class="section">White</section>

<section class="section">White</section>

<div class="color-scheme--violet-red"></div>

<section class="section">Colored</section>

<section class="section">Colored</section>

<div class="color-scheme--clear"></div>

<section class="section">White</section>

<section class="section">White</section>

<div class="color-scheme--violet-red"></div>

<section class="section">Colored</section>

<section class="section">Colored</section>

<div class="color-scheme--clear"></div>

<section class="section">White</section>

<section class="section">White</section>

<section class="section">White</section>

<section class="section">White</section>

<div class="color-scheme--violet-red"></div>

<section class="section">White</section>

<section class="section">White</section>

Adjacent sibling selector CSS

You can use a direct child selector for the .cart element:

.component-bottom .component-basket > .cart
{
     display:none;
}

Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.

You can overwrite all but the first one ElementA ~ ElementB:

.component-bottom .component-basket > .cart ~ .cart
{
    display:block;
}

This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.

This is called a general sibling selector.

jsFiddle

This should support IE7 and above:

Note Requires Windows Internet Explorer 7 or later.

source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx

an easier solution commented by @jrConway:

Make it display: block by default and use:

.component-bottom .component-basket > .cart:first-child
{
     display: none;
}

Example

Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.

CSS selector that targets a hovered element each of its five adjacent siblings in both directions

Because there is only an following siblings combinator ('~'), but no preceding siblings combinator nor a general siblings combinator, we have to do a trick: We need the list of all the paths twice. The first one is the one that we react on hover and the second one are the adjacent paths, that will change color (and are initially hidden)

The adjacency must be introduced manually, as there is no such concept in CSS. I do this with a data-adjacent-to attribute

This is proof of concept and needs fine tuning:

.path {

  transition: color 1s;

  stroke: black;

  stroke-width: 1px;

  fill: currentcolor;

}

.path:hover {

  color: black !important;

}

.path.hide {

  pointer-events: none;

  opacity: 0;

  position: relative;

  z-index: 1;

  color: transparent;

}

#path-1:hover ~ [data-adjacent-to*="path-1"] {

  color: gray;

  opacity: 1;

}

#path-2:hover ~ [data-adjacent-to*="path-2"] {

  color: gray;

  opacity: 1;

}

#path-3:hover ~ [data-adjacent-to*="path-3"] {

  color: gray;

  opacity: 1;

}

#path-4:hover ~ [data-adjacent-to*="path-4"] {

  color: gray;

  opacity: 1;

}

#path-5:hover ~ [data-adjacent-to*="path-5"] {

  color: gray;

  opacity: 1;

}

#path-6:hover ~ [data-adjacent-to*="path-6"] {

  color: gray;

  opacity: 1;

}

#path-7:hover ~ [data-adjacent-to*="path-7"] {

  color: gray;

  opacity: 1;

}

#path-8:hover ~ [data-adjacent-to*="path-8"] {

  color: gray;

  opacity: 1;

}

<svg width="200" height="200" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >

  <symbol id="lib-path-1" viewBox="0 0 100 100" >

    <path d="M50 50 l0 -50 l50 50"/>

  </symbol>

  <symbol id="lib-path-2" viewBox="0 0 100 100" >

    <path d="M50 50 l50 0 l-50 50"/>

  </symbol>

  <symbol id="lib-path-3" viewBox="0 0 100 100" >

    <path d="M50 50 l0 50 l-50 -50"/>

  </symbol>

  <symbol id="lib-path-4" viewBox="0 0 100 100" >

    <path d="M50 50 l-50 0 l50 -50"/>

  </symbol>

  <symbol id="lib-path-5" viewBox="0 0 100 100" >

    <path d="M100 0 l0 50 l-50 -50"/>

  </symbol>

  <symbol id="lib-path-6" viewBox="0 0 100 100" >

    <path d="M100 100 l-50 0 l50 -50"/>

  </symbol>

  <symbol id="lib-path-7" viewBox="0 0 100 100" >

    <path d="M0 100 l0 -50 l50 50"/>

  </symbol>

  <symbol id="lib-path-8" viewBox="0 0 100 100" >

    <path d="M0 0 l50 0 l-50 50"/>

  </symbol>

  

  <use class="path" id="path-1" xlink:href="#lib-path-1" style="color: green" />

  <use class="path" id="path-2" xlink:href="#lib-path-2" style="color: red" />

  <use class="path" id="path-3" xlink:href="#lib-path-3" style="color: blue" />

  <use class="path" id="path-4" xlink:href="#lib-path-4" style="color: orange" />

  <use class="path" id="path-5" xlink:href="#lib-path-5" style="color: pink" />

  <use class="path" id="path-6" xlink:href="#lib-path-6" style="color: silver" />

  <use class="path" id="path-7" xlink:href="#lib-path-7" style="color: gold" />

  <use class="path" id="path-8" xlink:href="#lib-path-8" style="color: brown" />

  <use class="path hide" xlink:href="#lib-path-1" data-adjacent-to="path-2 path-4 path-5"/>

  <use class="path hide" xlink:href="#lib-path-2" data-adjacent-to="path-1 path-3 path-6"/>

  <use class="path hide" xlink:href="#lib-path-3" data-adjacent-to="path-2 path-4 path-7"/>

  <use class="path hide" xlink:href="#lib-path-4" data-adjacent-to="path-1 path-3 path-8"/>

  <use class="path hide" xlink:href="#lib-path-5" data-adjacent-to="path-1"/>

  <use class="path hide" xlink:href="#lib-path-6" data-adjacent-to="path-2"/>

  <use class="path hide" xlink:href="#lib-path-7" data-adjacent-to="path-3"/>

  <use class="path hide" xlink:href="#lib-path-8" data-adjacent-to="path-4"/>

</svg>