Adding CSS Class to Multiple Elements

adding css class to multiple elements

You need to qualify the a part of the selector too:

.button input, .button a {
    //css stuff here
}

Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.

Your original selector therefore matched "all elements of type 'input' that are descendants of an element with the class name 'button', and all elements of type 'a'".

Css class with multiple html elements

When we are talking about styling and CSS I think it's important to keep in mind the specificity levels of a CSS selector.

What is Specifcity ?

It's what defines how broad the scope of your stylying rule is.

Simply put :

• The less specfific a rule is - the more abstract it is - and the more elements it will capture.
• The more specific a rule is -less abstract it is - and less elements will capture.
• More specific rules overwrite/replace less specficic rules.

In your example you have chosen a a rule style , which is applied to a very specific element , in this case .Header-bar p span span {font-weight: normal;} and ONLY that element.

However , if you had only written .Header-bar{font-weight: normal;} it would work aswell , except you would be applying that style to not ONLY that element but also ALL the other elements which are contained in that class.

When you want to be more specific and not write all the path to get to that element, you can simply give the HTML element an ID and use it then on CSS , like this , for example :

<footer> 
  <div>
    <div>
      <p id="IDsomething"></p>
    </div>
   </footer>
</div>

Then select on CSS :

#IDsomething { font-weight : 
normal;
}

---

There are four categories which define the specificity level of a selector:

• Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.

• IDs - An ID is a unique identifier for the page elements, such as #navbar.

• Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

• Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

---

How can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

CSS: How do I assign one class to multiple elements?

You just define your class in css and use it on elements you want in html

.centered {  text-align:center;}

<h1 class="centered">Lorem ipsum.</h1><h2 class="centered">Lorem ipsum.</h2><h3 class="centered">Lorem ipsum.</h3><p  class="centered">Lorem ipsum.</p>

Using two CSS classes on one element

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

Javascript set CSS Class for Multiple Elements (one element set, remaining elements unset)

Change your setClass function according to this. Hope it will work. document.getElementById() function will always return a single element (not a list of elements). Even if you have multiple elements having the same ID this function will always return the first element having the given ID. Do not forget to call your setClassSeas() function from html.

function setClassSeas(rareClass, commonClass, occClass) {    setClass("filter_rare", rareClass);    setClass("filter_common", commonClass);    setClass("filter_occ", occClass);}
function setClass(IDName, displayValue) {    var item = document.getElementById(IDName);    item.className = displayValue ? "filter-set" : "not-set";}

<div id="filter_rare" title="Rare" class="not-set"    onclick="chosenFrequency('frequency=Rare'); setClassSeas(true, false, false);"></div>
<div id="filter_common" title="Common" class="not-set"    onclick="chosenFrequency('frequency=Common'); setClassSeas(false, true, false);"></div>
<div id="filter_occasional" title="Occasional" class="not-set"    onclick="chosenFrequency('frequency=Occasional'); setClassSeas(false, false, true);"></div>

Adding CSS class selector to multiple HTML elements

A couple of mistakes you made :

1. .hello button, .hello a instead of button.hello, a.hello
2. Running SCSS code as CSS code
3. Color name was missing a digit

Correct SCSS code would be something like this :

button.hello, a.hello {
  border:none;
  background-color: #F47564;
  &:focus {
    outline: red solid 5px !important;
  }
}

That would be converted to the following CSS :

button.hello, a.hello {
  border: none;
  background-color: #F47564;
}
button.hello:focus, a.hello:focus {
  outline: red solid 5px !important;
}

See also this Fiddle.

---

Related Topics