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

css sibling selector
css sibling selector not working
css sibling selector support
css sibling selector before
css child selector
css contains focus
css-tricks sibling selectors
css detect sibling

I am having trouble with some code on my site, http://ethoma.com/wp/. In the search bar, on the left side, I want the usually dark gray "hit enter to search" to turn a light gray when the search field (its sibling) :focus is triggered. Here is the code I currently have:

    #s
{
    min-width:98%;
    background-color:#2a2a2a;
    color:#d3d3d3;
    border:2px solid #000000;
    font-size:.85 em;
    height:1.9em;
    display:inline !important;
    border-radius:5px 5px 5px 5px;
}

#s:focus
{
    border:2px solid #2a2a2a;
}

#searchsub
{
    color:#2a2a2a;
    text-align:right;
    font-size:.65em;
    font-weight:lighter;
}

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

Okay, #s is the search field and #searchsub is the div that I want to turn #cccccc (light gray). The last set of curly braces seems to be where I am having the problem (not the braces themselves, but the selector above it). As I said #s is a sibling of #searchsub and vice versa.

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

How do I modify properties of siblings with CSS selectors like :focus?, In the search bar, on the left side, I want the usually dark gray "hit enter to search" to turn a light gray when the search field (its sibling) :focus is triggered. Here is  I think everyone understands the basic decendent selector, but let’s do a quick overview of the other selectors in this style: the child combinator, the adjacent sibling combinator, and the general sibling combinator. Child combinator. This one we covered in the intro to this article. Let’s drive that same example home with a visual:

Use

+

adjacent sibling combinator (only if it immediately follows the first element)

~

general sibling combinator (only if it follows the first element (though not necessarily immediately)

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

How to style adjacent (sibling) elements on hover or focus events, It is often necessary to change the style of a sibling element when a event (​which would trigger the CSS pseudo-classes hover and focus ). Here's what the input and icon need to look like when the user clicks into the input. for sorting or ordering a list of objects based on a property in the object. The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

The problem with your code is that by placing #searchsub after #s:focus in #s:focus #searchsub, you're telling CSS to act upon the id #searchsub inside the id #s.

I agree with JamWaffles that you could do this with javascript. I would do it with jQuery, and if you would like, I can post how.

Adjacent sibling combinator, You want to use the adjacent sibling selector + instead, since #searchsub is the sibling that comes after #s: #s:focus + #searchsub { color:#cccccc; }  A brief on CSS previous siblings selectors and how to fake them to select all siblings or the ones that came before. Also featuring some cool snippets built with this technique!

Child and Sibling Selectors, The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being  The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. /* Paragraphs that come immediately after any image */ img + p { font-weight: bold; } Syntax former_element + target_element { style properties} Example CSS

General sibling, The general sibling combinator (~) in CSS looks like this in use: If the selector continued past the p or before .featured-image , the normal  We need to select all siblings of a certain element, and the ~ subsequent sibling combinator is only selecting the ones that come after. We need to select only siblings that came before; 1. Selecting all siblings. Sometimes we need to select both previous and next siblings. To do that, we can actually select the parent and use some tricks

Selectors, The following table summarizes CSS 2.1 selector syntax: E + F, Matches any F element immediately preceded by a sibling element E. Adjacent selectors. E[foo] Multiple attribute selectors can be used to refer to several attributes of an element, The last selector matches A elements that are in pseudo-class :focus and in  Only if instead of taking content it takes a valid CSS selector, it would solve the problem. @Paul Walker – I like your idea very much, it is much cleaner than “:contains”. But just to maintain the same pattern as CSS does, maybe we can modify it a little like this: div > a:$ > img — (or anything else in place of $ for that matter)

Comments
  • Have you thought about using jQuery to do this?
  • You should paste the relevant markup from your theme to save us the effort of having to follow a link in order to search for the relevant markup.
  • Should be mentioned however that the adjacent selector is part of CSS3, and as much as I wish this wasn't the case, CSS3 is not fully supported as of yet. If you're wanting users of Internet Explorer 7 and below to have this functionality, it might be buggy (in the case of IE7) or non-existent (in the case of IE6 and below). I wish we didn't have to code for such browsers, but my philosophy is when it concerns a hover state, use something that will work for all, not just for most. But hey, it's your call. I think CSS3 selectors are way cool!
  • @stefmikhail: You mistook the CSS2 adjacent sibling selector + for the CSS3 general sibling selector ~. Both are very well supported in IE7+.
  • @Rikudo Sennin I never said it wasn't doable with CSS, I only said I would choose to use javascript for this, seeing as using CSS for this will not work in older IE browsers.
  • When something is doable with css alone. It is usually best to do so. The top I would go to if absolutely needed, I'd use Modernizr to check if possible and use JavaScript else.