Css: How to Select Parent's Sibling

CSS: how to select parent's sibling

You cannot do that with CSS but

You can try using jQuery

$("#showCheckbox").click(function(){
    $(this).parent().siblings().show();
});

How to select parents sibling with CSS?

No, it's not possible with CSS currently, read this.

However, I guess you could do something like this JsFiddle instead.

ul {    list-style: none;    padding: 0;    width: 45px;    text-align: center;    position: relative;}li {    background: silver;    margin: 0 0 5px;}li:after {    content:"\25be";    font-size: 2em;    position: absolute;    left: 10px;    top: 35px;}li:hover:after {    z-index: 1;}li:nth-child(1):hover:after {    color: red;}li:nth-child(2):hover:after {    color: blue;}

<ul>    <li>A</li>    <li>B</li></ul>

CSS Parents Sibling selector

I initially closed this question due to the requirement of a parent selector (which does not exist), but actually you don't need it.

As long as your empty .parent element is entirely empty, ie. no white space whatsoever, then you may be able to use the following:

.parent:not(:empty) + .color {
  background: red;
  padding: 10px;
}

<div class="parent">
  <p class="tag">I live in Duckburg.</p>
</div>

<div class="color">
  <p>I will be selected</p>
</div>

<div class="parent"></div>

<div class="color">
  <p>I will NOT be selected</p>
</div>

Is it possible to select the child of my parent's sibling?

No, there's no way to select a "cousin" with pure CSS.

If #header were after .content, then you could select .button from a pseudo-class of .content -- an "aunt/uncle" -- using the adjacent sibling combinator (+) like this:

.content:hover + #header .button{/* styles */}

But even then, you're not able to select .button from a pseudo-class of .main (the "cousin")

CSS Selector for Child of Parent's Sibling Element

In a word: no.

Given the current structure of your HTML (and the current state of CSS selectors), this is not possible. Perhaps we will get something like this in CSS4, but traversal like this is best left up to Javascript.

You can obviously restructure your markup, and use the sibling selector:

HTML

<div class="parent">
    <a href="#" id="trigger">Trigger</a>
    <div class="sibling">
       <div id="change">Hello</div>
    </div>
</div>

CSS

#trigger:hover + .sibling #change {
  color:red; 
}

codepen

How to target the sibling of a parent from a child in css/scss?

You should use the label and input with an id and a for attribute

---

looking for a parent selector is a wrong method and impossible in CSS see Is there a CSS parent selector?

---

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Associating a <label> with an <input> element offers some major advantages:

• The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

• You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

Your HTML can become

<nav>
  <input type="checkbox" id="myId" />
  <label class="nav-toggler" for="myId">
    </label>
  <ul class="nav-links">
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</nav>

and the (S)CSS rules

.nav-toggler{
    &:before{
        content:'\2630';
      cursor:pointer;
    }
}
    input{
        opacity: 0;
        width: 0;
        height: 0;
        &:checked ~ .nav-links{
           display: block;
        }
    }

CSS selector - Select a element who's parent(s) has a sibling with a specific element

The only unqiquess I can find is the title attribute of the element within the element.

Typically you do not want to add style rules on the text of the title attribute as that text must be localized for screen readers.

I've tried $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul

What you’re asking is not currently possible with CSS. :/

Your best solution here will be to add a meaningful attribute or class to your HTML from within the JavaScript (or other language) that generates it.

---

Related Topics