How to select multiple elements using CSS

Question

I have the following markup:

<div class="c1">
  <div class="c2">
    <div class="c3">
      <input>
      <textarea></textarea>
    </div>

    <input>
    <textarea></textarea>
  </div>
</div>

I want to match the input and textarea elements from the div.c3 with only one CSS rule. I'm using

div.c1 .c2 .c3 input,textarea { border: 1px solid #f00; }

but this matches all textareas, not only the one cotnained in the c3 div.

Is this possible, or must I write separate CSS selectors for each element?

Look at http://jsfiddle.net/Bp3qn/1/ for the live example.

I updated http://jsfiddle.net/Bp3qn/3/

I only need the input and textarea contained in the c1->c2->c3 containers to be highlighted, not other combinations.

Today, div.c1 .c2 .c3 :is(input, textarea) is possible to avoid repetition. — Sebastian Simon
– Sebastian Simon, Commented Aug 21, 2021 at 23:34
@SebastianSimon that is very cool. I didn't know about :is() — Quamis
– Quamis, Commented Aug 23, 2021 at 6:13

the Tin Man · Accepted Answer · 2016-03-30 21:44:43Z

28

You don't need the other elements in the selector, unless you only want to match .c3 if it is within div.c1 .c2:

.c3 input,
.c3 textarea {
    /* that's it! */
}

If you do (per your edit), use this:

div.c1 .c2 .c3 input,
div.c1 .c2 .c3 textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/6/

after edit: thats what i'm trying to avoid (my real stylesheet is a lot more complex and css rules are longer, and its getting hard to read)

In that case, to make things easier just add another class to that .c3 like this:

<div class="c3 special">

.c3.special input,
.c3.special textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/7/

If you MUST have the selector as small as possible and there are no other children of .c3.special, just use the star selector (almost never recommended):

.c3.special * {border: 1px solid #f00;}

edited Mar 30, 2016 at 21:44

the Tin Man

161k44 gold badges222 silver badges308 bronze badges

answered May 27, 2011 at 8:27

No Results Found

103k38 gold badges199 silver badges232 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Quamis Over a year ago

after edit: thats what i'm trying to avoid (my real stylesheet is a lot more complex and css rules are longer, and its getting hard to read)

Quamis Over a year ago

i cant add another class (i'm trying to keep the markup simple also:) ) and i cant select all children, but it seems that this is as good as it gets. thx

No Results Found Over a year ago

@Quamis: Yep that's as good as it gets. Just use comments and good code style to keep your CSS readable.

Bart Vangeneugden · Accepted Answer · 2011-05-27 08:27:48Z

0

div.c1 .c2 .c3 input,.c3 textarea { border: 1px solid #f00; }

answered May 27, 2011 at 8:27

Bart Vangeneugden

3,4464 gold badges35 silver badges52 bronze badges

1 Comment

törzsmókus Over a year ago

this matches every textarea whose parent’s class is .c3, so it does not solve the question

Islem BEZZARGA · Accepted Answer · 2022-09-28 19:24:34Z

0

I know it's an old topic but I wanted to add some points on this because I just ended up here while trying to apply the same king of logic. And thanks to this question, I know now that we should reconsider that logic a bit.

First, the upvoted answer does solve the question but I don't understand why the use of .c1 .c2 classes in the CSS.

As @Wesley Murch first wrote, that should be enough:

.c3 input,.c3 textarea { /* that's it! */ }

It's also ok to specify a bit more with:

div.c3 input,
div.c3 textarea {
    border: 1px solid #f00;
}

which is already the shorthand for:

div.c3 > input,
div.c3 > textarea {
    border: 1px solid #f00;
}

But, IMO, unless you really have no control of what's inside your div, you should simplify everything by just adding one more class in your HTML and then you'll also end up with only one rule which will be even a bit easier to read:

HTML update with one more class special-border-color for exemple:

<div class="c1">
    <div class="c2">
        <div class="c3">
            <input class="special-border-color">
            <textarea class="special-border-color"></textarea>
        </div>
            
        <input>
        <textarea></textarea>
    </div>
</div>

CSS simple rule:

.special-border-color {
    border: 1px solid #f00;
}

answered Sep 28, 2022 at 19:24

Islem BEZZARGA

597 bronze badges

3 Comments

Quamis Over a year ago

.c1 .c2 .c3 were there because the the input & textarea should be styled with style1 only in that context. If the parents was simply .c3, then the styling should be style2. So yes, there was a need for that.

Quamis Over a year ago

also, please note that div.c3 input and div.c3 >input are not shorthand of eachother. One applies to ALL inputs, no matter how deep, the other one applies to input on the FIRST CHILD LEVEL.

Quamis Over a year ago

and yes, If you have access to the way the html is generated then of course it's easier to add a custom class like special-border-color and use that for styling. In my case, I didn't want to change the way the html was generated (it was a small widget-like call that was used thousands of times, but only in one case it needed a different styling)

Collectives™ on Stack Overflow

How to select multiple elements using CSS

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related