How to Use CSS Sibling Select to Select a Tag with a Link That Follows a Tag with an Image

Sibling selector on image wrapped with links

To be considered siblings, the elements need to be children of the same immediate parent (not just a common ancestor, since all DOM elements share body as an ancestor for example). Consider something like this:

a ~ a > img.a {
    /* styles */
}

CSS selector: How to select element sibling AND element itself?

The first link isn't red because there's no preceding element to refer to, and there isn't a CSS selector that can do this. See Is there a "previous sibling" CSS selector?. A better idea would be to have a common parent element to refer to, such as .adjacent-links, like so:

.adjacent-links a { color: red; }

<a class="nav-link-primary">link</a><span>Lorem</span><span class="adjacent-links">    <a class="nav-link-secondary">link</a>    <a class="nav-link-tertiary">link</a></span>

How to use CSS to select an element only if a specific element comes after the one you want to select?

It's not possible in CSS3, the best you can do is select only the <ul> which follow <p>:

p + ul { /*...*/ }

However it will be possible when browsers start implementing the CSS4 subject operator:

!p + ul { /*...*/ }

In the meantime, you'll have to use jQuery and walk the DOM back.

How to apply a style to a sibling element from another element

What the heck is that selector >|+|~ lol never have seen it in my life

Anyways if the <hr> had the same parent, you could do this with adjacent sibling selector:

CSS

.link2:hover + .subnavbar-menu hr {
  margin-left: 50%;
}

But since it has a different parent I don't believe this is possible with pure css.

jQuery

$('.link2').mouseover(function() {
    $('.subnavbar-bar hr').css('marginLeft', '50%');
}).mouseout(function() {
   $('.subnavbar-bar hr').css('marginLeft', 'auto');
});

Here is codepen example: http://codepen.io/StefanBobrowski/pen/qrGJga

How do I modify properties of siblings with CSS selectors like :focus?

Like stefmikhail said, the space in your selector means #searchsub is inside #s. As far as HTML is concerned, though, that is obviously wrong because input fields are empty elements and you can't have other elements inside them.

You want to use the adjacent sibling selector + instead, since #searchsub is the sibling that comes after #s:

#s:focus + #searchsub
{
    color:#cccccc;
}

Can I target a :before or :after pseudo-element with a sibling combinator?

You can't target :after since it's content is not rendered in the DOM and it does not manipulate it - for this to work the DOM would have to be re-rendered and CSS can't manipulate it like this.

Check the specification for detailed understanding: http://www.w3.org/TR/CSS2/generate.html#propdef-content

Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).

I suggest you use JavaScript to do the job for you.

How to access anchor tag followed by an ul element?

Several options for that:

1. Using a double selector such :not(:last-child) increases a bit
   performance degradation. So you should better put your generic CSS
   for the case in which <a> is followed by <ul> and then use
   a:only-child to select and format the other case.
2. Or you can put <ul> before <a>, then use Flexbox to change the order in the following way:

.parent, .parent ul{  list-style: none;  padding: 0;}.parent > li {  display: flex;  flex-flow: column nowrap;  padding: 5px;  border-bottom: solid 1px #ccc;}.parent ul {  order: 2;}ul + a {  color: red;}

<ul class="parent"> <li>  <ul><li>dummy list item</li></ul>  <a href="#">Menu link 1</a> </li> <li>  <a href="#">Menu link 2</a> </li> <li>  <a href="#">Menu link 2</a> </li> <li>  <a href="#">Menu link 1</a>  <ul><!--more code here --></ul> </li></ul>

How to select input tag when followed by span tag?

You can use + selector to Selects all <span> elements that are placed immediately after <input> elements

input + span {    background-color: yellow;}

<input type="text"><span>test</span>

Is there such a thing as an all inclusive sibling CSS selector?

There is no sibling combinator that looks backward or around, only the adjacent and general sibling combinators that look forward.

The best you can do is determine a way to limit selection only to these p elements with the same parent, and then select the p children that are :not(.green_guys). If the parent element has an ID of #parent, for example, you can use this selector:

#parent > p:not(.green_guys) {
    /* selects all <p> children of #parent that are not .green_guys */
}

However the above will still match your p elements even if none of them have the class. It is currently not possible to select the siblings of an element only given the existence of said element (which is the purpose of a sibling combinator — to establish a relationship between two sibling elements).

---

Selectors 4's :has() will hopefully rectify this without the need for a preceding-sibling combinator, resulting in the following solution:

p:has(~ .green_guys), .green_guys ~ p {
    /* selects all <p> elements that are siblings of .green_guys */
}

This will not match anything if none of the children of the parent element have the class.

What is syntax for selector in CSS for next element?

This is called the adjacent sibling selector, and it is represented by a plus sign...

h1.hc-reform + p {
  clear:both;
}

Note: this is not supported in IE6 or older.

---

Related Topics