Multiple dots/periods in CSS

Question

Can one of you CSS experts explain this designator (if that's even what you'd call it) to me? I understand the contents, just not the a.button.gold. Two dots?

a.button.gold{
background-color: #b9972f;
}

I am trying to modify a couple of styles on a Wordpress theme and would have a lot more success with it, if I could figure out what is currently happening. Thanks

Answer 1

The selector simply means select any a element having class .button AS WELL AS .gold so your anchor tag should look like

<a href="#" class="button gold">Hello</a>

Demo

The selector can be also written as element[attr~=val] as @BoltClock Commented like

a[class~="button"][class~="gold"] {
   color: #f00;
}

Demo

---

Generally the above(Not the selector, but calling multiple classes for a single element method) is also used when you want to apply properties of 2 classes to a single element, so say for example you have .demo having color: green; and .demo2 having font-weight: bold; so using

<p class="demo demo2">Hello, this will be green as well as bold</p>

Will make it green as well as bold. Demo 2

Answer 2

This selector represents an <a> element with two classes, as you can have as many classes (separated with a white-space in the class attribute itself) in CSS as you'd like. The HTML would look like:

<a href="#" class="button gold">Test</a>

If the <a> had three classes you'd just continue the pattern:

<a href="#" class="button gold test">Test</a>

a.button.gold.test {
    color: peachpuff;
}

http://jsfiddle.net/NeqAg/

Answer 3

This means, the background color specified will be applicable to all <a> tags whose "class" attribute has a value of either "button" or "gold".

For example, if you have a tag

<a href="#" class="button">Button</a>

and another tag

<a href="#" class="gold">Gold</a>

then, the background color for both the classes will be the same specified one.