Creating styles for more than one id with one selector

Question

I need another ID to be styled with one selector in CSS. For example:

#search:focus {
    height:50px;
    font-size:16px;
}

What if I wanted "#searchline" to have some other styling while #search was in focus? This doesn't work:

#search:focus {
    height:50px;
    font-size:16px;
    #searchline {
        margin-top: -10px;
    }
}

I'm not sure how to do this.

Is the `searchLine element a child of a the element `search` ?? If so this can be done using CSS only else Jquery will be required — Rajshekar Reddy, Sep 20 '16 at 12:06
not sure what you actually want, but: use classes. You can combine as many classes as you want, both when assigning them to a tag and in combined selectors for CSS rules. — Johannes, Sep 20 '16 at 12:07
@Reddy `#search:focus #searchline { code here }` is as close to conditional as you can get . it means : " if `#search` is `focused` and if `#searchline` is a child of `#search` then apply code to `#searchline` else do nothing " . or am i wrong ? — Mihai T, Sep 20 '16 at 12:10
@MihaiT you are right. But as I mentioned it works if the `#searchline `element is child of `#search`.. — Rajshekar Reddy, Sep 20 '16 at 12:14
@Reddy well if your HTML structure is dynamically generated ( i mean if you don't know where the #searchline is situated ) then you can't do this with CSS . if you know if it is child or sibling then you can do it with CSS. else..you need to use JQ or JavaScript etc. — Mihai T, Sep 20 '16 at 12:19
but i think ( because of how the OP wrote the CSS which looks like SASS or LESS ) that `#searchline` is a child of #search . it's up to the OP to let us know :) — Mihai T, Sep 20 '16 at 12:21
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Sep 20 '16 at 12:28
@MihaiT No, `#searchline` is not a child element of `#search`; I'd just like to add styling to `#searchline` by itself, when `:focus` is triggered. My second code snippet is me experimenting out of pure logic, when seeing @media queries, etc in CSS. Sorry for not being clear - I'll probably end up using jQuery to style. Thanks for the help. — dirranbolt, Sep 20 '16 at 12:38
well you CAN do that with css ( ` add styling to #searchline by itself, when :focus is triggered. ( on #search ) ` ) IF `#searchline` is CHILD of `#search` OR if the two are siblings ( on the same level in HTML ) . in any other case, you can't do that with CSS — Mihai T, Sep 20 '16 at 13:08

score 0 · Answer 1 · edited Sep 29 '16 at 19:55

0

If both are next each other you can try

#search:focus {
    height:50px;
    font-size:16px;
}
#search:focus + #searchline {
    margin-top: -10px;
}

Read more at http://www.w3schools.com/cssref/css_selectors.asp

element+element div + p Selects all <p> elements that are placed immediately after <div> elements.

edited Sep 29 '16 at 19:55

Mr Lister

45,515
15
108
150

answered Sep 20 '16 at 12:35

Alan Aasmaa

56
5

3rdthemagical · Answer 2 · 2016-09-20T12:11:42.713

-1

If #searchline is a child of #search add #searchline selector to your first rule.

#search:focus #searchline {
    margin-top: -10px;
}

If #searchline is not a child of #search you should use javascript to style #searchline element.

edited Sep 20 '16 at 12:11

answered Sep 20 '16 at 12:06

3rdthemagical

5,271
18
36

Creating styles for more than one id with one selector

2 Answers2