Css grouping multiple id`s classes

Question

I have something like this:

<div id="attributes1"><span class="heading_fieldset"></div>
<div id="attributes2"><span class="heading_fieldset"></div>

and

#attributes1 .heading_fieldset {
    display:inline-block;
    width: 30px;
}
#attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

how can I group the CSS to be something like (the next CSS is not good...it messes up my page):

#attributes1, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

Thank you

Josh Crozier · Accepted Answer · 2013-10-20 02:15:53Z

4

You would use:

#attributes1 .heading_fieldset, #attributes2 .heading_fieldset {
    display:inline-block;
    width: 30px;
}

You were trying to add the properties to the elements: #attributes1, and .heading_fieldset with a parent of #attributes2.

I don't know the full context of what you are trying to do, so this might not work - however, you could probably just apply those properties to .heading_fieldset without having to select the parent. That will reduce some of the redundancy.

edited Oct 20, 2013 at 2:15

answered Oct 20, 2013 at 2:06

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

2 Comments

user2875157 Over a year ago

now I get it, so the properties only applied to #attributes2 . It works now! GJ

user2875157 Over a year ago

@JoshC it works on FF/CHROME/IE/MOZILLA , I can`t wait to accept the answer :)

Oriol · Accepted Answer · 2013-10-20 02:16:33Z

1

In this cases I use classes

HTML:

<div class="attributes"><span class="heading_fieldset"></div>
<div class="attributes"><span class="heading_fieldset"></div>

CSS:

.attributes > .heading_fieldset {
    display:inline-block;
    width: 30px;
}

But, if you REALLY need the ids, use

<div id="attributes1" class="attributes"><span class="heading_fieldset"></div>
<div id="attributes2" class="attributes"><span class="heading_fieldset"></div>

which maybe is repetitive, but I prefer that than an awful and unreadable stylesheet

answered Oct 20, 2013 at 2:16

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

sheriffderek · Accepted Answer · 2013-10-20 04:19:15Z

I would say you should stick with classes as well. Save ID's for javaScript interaction or special things. This way you can style all .attribute the same - and then .thing01 or whatever to get more specific styles. Your spans aren't closed, so that is a problem. Also, you probably should use heading markup if they are really headings. jsFiddle: - What you really need is to rethink CSS a little and remember that it reads right to left basically. So when you write: .thing .other-thing h1 { } upi are saying, "apply these styles to 'all h1's that are inside .other-thing, which is inside .thing.' I hope that helps!

HTML

<div class="attribute thing01">
  <h2>Your heading</h2>
</div>

<div class="attribute thing02">
  <h2>Your heading</h2>
</div>

CSS

.attribute {
  display:inline-block;
  width: 30px;
  /* example CSS */
  border: 1px solid red;
  padding: .5em;
}

.thing01 {
  background-color: red;
}

.thing02 {
  background-color: lightblue;
}

.attribute h2 {
  font-size: 1.5em;
}

Collectives™ on Stack Overflow

Css grouping multiple id`s classes

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related