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?

Is it not possible to just avoid using the e and item classes? — BSMP
– BSMP, Commented Jun 25, 2016 at 20:08
@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. — Alohci
– Alohci, Commented Jun 26, 2016 at 1:35
@Alohci That was what I used randomly as I can't post production code online, changed to sects. — TheCrazyProgrammer
– TheCrazyProgrammer, Commented Jun 26, 2016 at 2:24
@BSMP Nope, I am working on a smaller part of a larger document. — TheCrazyProgrammer
– TheCrazyProgrammer, Commented Jun 26, 2016 at 2:24

Jose Manuel Gomez Alvarez · Accepted Answer · 2016-06-25 20:22:25Z

2

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

answered Jun 25, 2016 at 20:22

Jose Manuel Gomez Alvarez

2,30425 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TheCrazyProgrammer Over a year ago

I'm still confused between .c<space>.d versus .c.d Can you please explain?

Jose Manuel Gomez Alvarez Over a year ago

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

Scott · Accepted Answer · 2016-06-26 03:43:21Z

1

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

edited Jun 26, 2016 at 3:43

answered Jun 26, 2016 at 3:14

Scott

21.9k8 gold badges45 silver badges57 bronze badges

6 Comments

Alohci Over a year ago

Descendant, not child. > is the child combinator.

Scott Over a year ago

A descendent is a child. The > indicator is for a direct descendant.... but both refer to child elements.

Alohci Over a year ago

That's not how css terminology works. See w3.org/TR/css3-selectors/#combinators

Scott Over a year ago

Descendent - Child -- according to the English language... it is. I do not believe W3.org has intended to rewrite the English language.

Alohci Over a year ago

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

|

Collectives™ on Stack Overflow

Defining CSS classes

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related