Question

I have the following CSS class :

 #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{
     padding-right:2.5%;
     padding-left:0
 }

WOuld it be correct to interpret this as for all HTML elements that use css class menuAccordian, if there is an <H2> or <A> tag inside this element, it will apply the padding that’s defined inside the {}?
what do the .dir-rtl and .viewList refer to?

Also, if I had the following code all on one line in my css:

 #secNav #showHideMenu a.fixed{
     position:fixed;
     top:0
 }

 .HomePage #content{
     min-height:300px
 } 

 #content{
     background-color:#FFF;
     min-height:600px;
     position:relative;
     z-index:0
 }

Can I assume that each time I see a #, that it’s the start of a new class, and can I also assume that these classes are NOT related to each other?
I’m just trying to understand why the author would have put all this on one line. It’s not readable. But maybe it’s because they’re related.

Thanks.

Answer 1

First, terminology. The part before a set of curly braces is called a selector. There can be multiple selectors separated by commas. In a selector, you can use #name to match elements by their id attribute and .name to match them by their class attribute.

---

CSS selectors match the last item listed, generally speaking.

#menuAccordion h2 a

This matches <a> elements inside <h2> elements inside an element with id="menuAccordion".

.dir-rtl #menuAccordion .viewList

This matches an element with class="viewList" inside an element with id="menuAccordion" inside an element with class="dir-rtl".

The meaning of the viewList and dir-rtl classes is up to the page author. They have no inherent meaning.

---

Putting everything on one line doesn’t change the meaning of the CSS. It’s probably just a space-saving tactic at the expense of readability.