Multiple points / periods in CSS

Question

Can one of you CSS experts explain this pointer (if that’s even what you would call it) to me? I understand the content, just not a.button.gold. Two points?

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

I am trying to change several styles in a Wordpress theme and would have had much more success with it if I could figure out what is happening at the moment. thanks

Answer 1

A selector simply means selecting any element a that has a .button AS WELL AS .gold , so your anchor tag should look like

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

Demo

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

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

Demo

---

As a rule, the above (not a selector, but calling several classes for a method with one element) is also used when you want to apply the properties of 2 classes to one element, so let's say, for example, you have .demo with color: green; and .demo2 with font-weight: bold; therefore 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, since you can have as many classes (separated by a space in the class attribute) in CSS as you want. HTML will look like this:

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

If <a> had three classes, you simply continue the template:

 <a href="#" class="button gold test">Test</a> a.button.gold.test { color: peachpuff; } 

http://jsfiddle.net/NeqAg/

Answer 3

This means that the background color specified will apply 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 classes will be the same specified.