0

I came across the following tag in CSS3. Being 'CSSmenu' div class name. I have problem in understanding the remaining syntax like :

why referred with dot(.)

cssmenu.align-center

cssmenu .has-sub

Community
  • 1
  • 1
vaisshnavi janani
  • 25
  • 2
  • In css, dot refer to a class name. So it's selecting cssmenu with attribut class containing `align-center` or `has-sub`. The space between is irrelevant. – Cyrbil Jul 01 '15 at 07:21
  • possible duplicate of [What does the dot mean in CSS?](http://stackoverflow.com/questions/12811149/what-does-the-dot-mean-in-css) – andyb Jul 01 '15 at 07:26

2 Answers2

1

.a refers to all the elements which has the class a

div.a refers to all div which has the class a

div .a refers to all children of a div which has the class a

That's the same for your example :

.cssmenu.align-center refers to all the elements which has the classes cssmenu AND align-center

.cssmenu .has-sub refers to all the elements which has the class has-sub and are children of an element which has the class .cssmenu

antoinestv
  • 3,286
  • 2
  • 23
  • 39
1

.cssmenu.aligncenter is used to select a div with multiple classes. That is, I want to select the cssmenu which has another class align-center.

.cssmenu .has-sub is used to select a div which has .has-sub nested within. Also known as Descendent selector.

.cssmenu.aligncenter {
  text-align: center;
}
.cssmenu .hassub {
  font-style: italic;
  font-size: 2em;
}
<div class="cssmenu">Not centered and not bold</div>
<div class="cssmenu aligncenter">Text centered</div>
<div class="cssmenu">
  <div class="hassub">It contains subsections, so I am Italic</div>
</div>
m4n0
  • 29,823
  • 27
  • 76
  • 89