CSS for Same Level

CSS for same level

Use the general sibling combinator

#yourId:hover ~ div
{
    color:red;
}

Also note that Id's must begin with a letter. W3 ID Attribute

Example

Select divs after same level element

Okay, now that the question has been edited once more, again making my previous answer looking wrong, I change my answer once more to make it fit the question:

You can use several + selectors to "count up" to the first sibling that should be affected and then add a ~ selector after that to select all following siblings with the same class:

.header + .inner + .inner  + .inner ~.inner {color: red;}

<div class="general"><div class="inner">Foo 1</div>    <div class="inner">Foo 2</div>    <div class="inner">Foo 3</div>    <div class="header">Bar</div>    <div class="inner">Foo 4</div>    <div class="inner">Foo 5</div>    <div class="inner">Foo 6</div>    <div class="inner">Foo 7</div>    <div class="inner">Foo ...</div>    <div class="inner">Foo ...</div>    <div class="inner">Foo ...</div>    <div class="inner">Foo n</div></div>

access css class that's on same level as

Just use the same Sibling ~ operator:

.chat-box > input[type="checkbox"]:checked ~ .chat-input

.chat-box > input[type="checkbox"]:checked ~ .discussion, .chat-box > input[type="checkbox"]:checked ~ .chat-input {display:none;}

<div class="chat-box">  <input type="checkbox" />  <label>Name</label>  <ol class="discussion">    <li class="other">      <div class="avatar">        <img src="robert.jpg" />      </div>      <div class="messages">        <p>Yesh finally een nice interface met goede chats.</p>        <p>Nu nog een mooi font</p>        <time datetime="2009-11-13T20:00">Bas • 51 min</time>      </div>    </li>    <li class="self">      <div class="avatar">        <img src="robert.jpg" />      </div>      <div class="messages">        <p>Uhu</p>        <time datetime="2009-11-13T20:14">37 mins</time>      </div>    </li>  </ol>  <input type="text" placeholder="type here your message" class="chat-input"></div>

CSS :not for selector on the same level

Dont stringify the selector, this is not Jquery. Simply remove the ''.

.stars {
  &:not(.stars--done):hover {
    i {
      //do somehting
    }
  }
}

Ps you can also write:

.stars {
  &:hover:not(.stars--done) {
    i {
      //do somehting
    }
  }
}

How to make css selectors with the same specificity be applied in order of HTML tags parenthood?

It can be achieved using CSS variables:

a {
  color: var(--link-color);
}
.style1 {
  --link-color: red;
}
.style2 {
  --link-color: green;
}

<div class="style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

CSS Selector for Hover State that is on Same Level

Easy, sibling selectors:

Adjacent Sibling Selector

img.screenshot:hover + img.icon { /* styles here */ }

General Sibling Selector

img.screenshot:hover ~ img.icon { /* styles here */ }

CSS for hover to change same-level element

The issue you are running into with using only CSS is that there doesn't exist a CSS selector to select the previous or parent element. You can work around this stipulation if your images are going to be consistent sizes (height), you could put the <h4> ahead of the <div class="gallery-image"> and position it below the image with position: absolute; -- allowing your to use the CSS ~ selector to have hover events affect the image because it is after the element in the DOM. Also, I alleviated your white space selector issue with display: inline-block;:

<div class="gallery">
    <h4>...</h4>
    <div class="gallery-image">...</div>
</div>

.gallery {
  position:relative;
}  
.gallery-image:hover span {
  display:block;
}
.gallery-image:hover img {
  opacity:0.2;
}
.galleries h4 {
  margin-top:5px;
  line-height:27px;
  display: inline-block;
  position: absolute;
  top: 230px;
} 
.galleries h4:hover~.gallery-image img {
  opacity:0.2;
}
.galleries h4:hover~.gallery-image span {
  display: block;
}

-- I only included edited CSS above

JSFIDDLE

Aligning bottoms of divs to same level

You can use display: flex with align-items: flex-end on parent element.

.comments {  width: 320px;  height: 340px;  background-color: #818181;}.comment_cont {  float: right;  display: flex;  align-items: flex-end;}

<div class="comment_cont">  <div class="button_div">    <button>Button</button>  </div>  <div class="comments"></div></div>

---

Related Topics