CODEWITHSUNDEEP
csscss-selectors
TheCrazyProgrammer
TheCrazyProgrammer

Reputation: 8618

Defining CSS classes

I'm a novice to CSS. I'm reading some code where classes are defined like:

.a.b .c.d li.e {
margin-top:none; }

.a.b .c.d sects.item {
border-top: 1px; }

I am confused what does this mean? How do I define my own class if I want to override the border in above case?

Upvotes: 0

Views: 571

Answers (2)

Scott
Scott

Reputation: 21890

.a.b .c.d li.e {
margin-top:none; }

<div class="a b">
  <ul class="c d">
     <li class="e">
        This is the area being referred to in the CSS.
     </li>
   </ul>
</div>

Select element with class a and b, then select the children of that element but only with class c and d, then select the list item children of that element, but only those with the class e.

I'm guessing that there's a <ul> tag in there as a direct parent of the <li>. For valid HTML, there would need to be.

When CSS has no space between two selectors it means both selectors are used on the same element, with a space between them.

.c.d refers to 

<div class="c d"></div>

#c.d Would refer to 

<div id="c" class="d"></div>

where as .c .d would refer to 

<div class="c">
<div class="d"></div>
</div>`

The space in the CSS means .d is a child of .c. No space means both selectors are used on the same element.

The below kind of does the same thing. However it would select something referred to as "sects" but that's not a valid tag and there's no declaration character (# or . ) before it to indicate an ID or Class. Then only the "sects' with the class item. So... the below is sort of broken. (Unless someone is using custom HTML5 tags).

.a.b .c.d sects.item {
border-top: 1px; }

Upvotes: 1

Jose Manuel Gomez Alvarez
Jose Manuel Gomez Alvarez

Reputation: 2246

These are called CSS Selectors, google "css selectors" to find out more.

Here is the reference from w3: http://www.w3schools.com/cssref/css_selectors.asp

In brief,

"." is used to select a class "#" is used to select a unique element by its "id" property .class1 .class2, selects elements of class2 descendants of class1 "," is an OR conjunction etc.

So for your examples:

  • .a.b .c.d li.e { ... } : Applies the style to <li> elements of class "e" which are descendants of elements of class "c" and "d", which are in turn descendants of elements of class "a" and "b"

  • .a.b .c.d sec.item {...} : Applies the style to elements <sec> of class="item" that are descendants of elements of class "c" and "d", which are in turn descendants of elements of class "a" and "b".

Upvotes: 2

Related Questions