how to read the following css class

Tags: css

Problem :

I have the following CSS class :

 #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{

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{

 .HomePage #content{


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.


Solution :

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.

    CSS Howto..

    jquery - How to determine if a div changes its height or any css attribute?

    How to differentiate the common css class by using other css class

    How to assign a unique CSS id to each cell in a jqGrid?

    How do I stick my footer to bottom of the page with Google Chrome?

    How to Override bootstrap img height and width properties?

    How do I achieve a hover over image effect?

    jQuery - CSS DropDown Navigation Items - How to build a Carrot Dropdown

    How to make a transparent border using CSS?

    Showing hidden divs element using jQuery show() not working in IE7

    How to comment in-line CSS?

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    How to use CSS Class and ID selectors

    How to make read more option with html/CSS?

    How to align Navbar at bottom of window, but have content under this in CSS?

    How to vertically align image in a td cell, without vertically-align

    How to override html property created by script (mediaelement.js)

    How to ensure that columns are contained within a row

    Dropdown not showing elements Bootstrap 3

    How to download custom font for users who don't have it? [duplicate]

    How would I get my horizontal navigation bar to span the full width?

    How to make a picture responsive that is on wordpress custom post type through HTML/CSS

    How to borrow styles from another CSS rule

    How to find the relevant stylesheet for a specific CSS code [closed]

    How to make content of invisible except for the left column?

    CSS How to target element without a tag

    Any Idea how this web site acheives a fluid/liquid layout [closed]

    How to wrap div containing spans containing the text to be wrapped?

    How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

    How to add styling (CSS) to tags in Javascript/Jquery

    How to achieve navigation mouseover effect like in screenshot [closed]