Style methodology (CSS)

Question

I notice a few different ways of applying styles and am trying to understand the differences between them, also if one can be used interchangeably with another? IF so, which is a better approach, and is there a newer standard among the below?

.rootClass { /*Styles for rootClass */ }

.rootClass > a > .classA.someClass, .rootClass > a > .classB.someClassB {
   /* Styles */
}

.rootClass a.classA.someClass, .rootClass a.classB.someClassB{ 
     /* Styles */
}

Also it will help to understand difference between:

   .rootClass .classA.someClass, .rootClass .classB.someClassB{ 
         /* Styles */
    }

   .rootClass.classA.someClass, .rootClass.classB.someClassB{ 
         /* Styles */
    }

Assuming I have the following HTML which styles can be possibly applied among the above?

HTML1:

<div class="rootClass">
<a class="classA someClass">Test</a> 
</div>

HTML2:

<div class="rootClass">
     <p class="classA">Some text here</p>    
        <span>
            <p class="classA">More text here</p> 
        </span>
</div>

I don't understand your question they both mean different things? See: http://stackoverflow.com/questions/4459821/css-selector-what-is-it — Ashley Medway, Mar 26 '14 at 16:55
They both mean different things depending on your markup, for example, in the 1st example, your markup *might* look like this: `
` and in the 2nd example, your markup might look like this: `
` — Nick R, Mar 26 '14 at 17:01
@NickR The selectors are literally meaning different things, although depending on your markup they might apply exactly the same. The selectors are not a different way of achieving the same thing, they are just different. — Ashley Medway, Mar 26 '14 at 17:04

score 3 · Accepted Answer · edited Mar 26 '14 at 17:01

3

There's many ways to apply styles using specificity. These just happen to be 3 different ways. There is no 'better' way. They all have their own uses. Note that all 3 examples are applying styles to different objects. These aren't 3 interchangeable ways to apply the same styles to the same object.

.rootClass { /*Styles for rootClass */ }

The above applies a style to any element with that class. Example: <div class="rootClass">

.rootClass > a > .classA.someClass, .rootClass > a > .classB.someClassB {
   /* Styles */
}

The above applies styles with much more specificity. It will only apply to an object with two classes that is a direct descendent of an a that is a direct descendent of an object with a particular class. This is much more specific than the previous example. Example: <div class="rootClass"><a><div class="classA someClass">

.rootClass a.classA.someClass, .rootClass a.classB.someClassB{ 
     /* Styles */
}

The above is applying styles to anchor tags that are children of a root class that also happen to have two specific classes. Example: <div class="rootClass"><div><div><a class="classA someClass">

edited Mar 26 '14 at 17:01

Mike Brant

70,514
10
99
103

answered Mar 26 '14 at 16:57

DA.

39,848
49
150
213

downvoters? Explanation? – DA. Mar 26 '14 at 16:57
1

I thought it was a pretty good explanation. You might want to add note to OP original question that these are not different notation styles, but rather different actual rules. – Mike Brant Mar 26 '14 at 16:59
@MikeBrant yep. Good point. Also added example markup. – DA. Mar 26 '14 at 17:00
@DA. thanks for the edit I miss read your layout – Ashley Medway Mar 26 '14 at 17:00
1

Probably the explanations should be -above- the code, maybe that caused some confusion hence the downvotes. +1 from me. – Kaloyan Mar 26 '14 at 17:01
1

@KaloyanIvanov I agree thatt could be confusing as typically that is the way it is done. I made slight edit to hopefully add clarity. – Mike Brant Mar 26 '14 at 17:02

Style methodology (CSS)

1 Answers1