Defining CSS classes

Question

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?

• BSMP: Is it not possible to just avoid using the e and item classes?
• Alohci: @Xufox - sec is a valid MathML trigonometry content element tag name. In Firefox, which has always had the best MathML support, that selector can be used to put a border over the element [jsfiddle] and the markup in the jsfiddle passes HTML validator nu conformance checker.
• TheCrazyProgrammer: @Alohci That was what I used randomly as I can't post production code online, changed to sects.
• TheCrazyProgrammer: @BSMP Nope, I am working on a smaller part of a larger document.

Answer 1

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".

• TheCrazyProgrammer: I'm still confused between .c<space>.d versus .c.d Can you please explain?
• Jose Manuel Gomez Alvarez: ".c .d" -> elements of class .d descendant of elements of class .c, for instance <div style=".c"><p style=".d"></p></div>; but ".c.d" selects elements having both classes simultaneously, for instance <p style=".c .d"></p>

Answer 2

.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; }

• Alohci: Descendant, not child. > is the child combinator.
• Scott: A descendent is a child. The > indicator is for a direct descendant.... but both refer to child elements.
• Alohci: That's not how css terminology works. See w3.org/TR/css3-selectors/#combinators
• Scott: Descendent - Child -- according to the English language... it is. I do not believe W3.org has intended to rewrite the English language.
• Alohci: "When I use a word," Humpty Dumpty said, in rather a scornful tone, "it means just what I choose it to mean—neither more nor less." "The question is," said Alice, "whether you can make words mean so many different things." "The question is," said Humpty Dumpty, "which is to be master—that's all." - Lewis Carroll, Through the looking glass.