CODEWITHSUNDEEP
htmlcss
user2875157
user2875157

Reputation: 140

Css grouping multiple id`s classes

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

Upvotes: 1

Views: 3119

Answers (3)

sheriffderek
sheriffderek

Reputation: 9053

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

Upvotes: 1

Oriol
Oriol

Reputation: 288680

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

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241238

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.

Upvotes: 4

Related Questions