Selector - Class Selector

About

A Class selector that selections nodes by targeting the class attribute.

Syntax

The shorthand Class selector names are:

• the class name
• preceded with a period.

.className1.classNameN

The same fully qualified is based on attribute selection

[class="className1"][class="classNameN']

One class

/* Selects elements with class "caption"  and other class name if any */
.caption
/* Selects elements with class "label"  and other class name if any   */    
.label
/* Selects elements with class "axis"  and other class name if any */
.axis

More than one class

Elements can be selected on more than one class. This is call an intersection definition (ie and AND logic)

/* An element with the class x AND axis  */
.axis.x         
/* Same as */
[class="x"][class="axis']
/* An element with the class y AND axis  */
.axis.y
/* Same as */
[class="axis"][class="y']

Logical (has)

With logical pseudo class

Example of a selector when the element has the class fade but not the class show, the opacity will be 0

.fade:not(.show) {
    opacity: 0;
}

CSS Example

Basic

• The HTML code

<p class="x axis">The "x axis" class element will be blue</p>
<p class="axis x">The "axis x" class element will also be blue</p>
<p class="axis">The "axis" class element will have no specific style</p>
<p class="comment">The order of the class name in the class attribute doesn't matter</p>
<p class="note otherBadClassName">This note will have the same style that the comment above even if it also has an other Class Name without style.</p> 

• The CSS: Predicates can be:
  • intersected (“.a.b”). The tag must have the class A and the class B.
  • or unioned (“.a, .b”). The tag must have the class A ou the class B

/* An intersection: the elements must have the two class names in order to select them */
.x.axis { color:blue; }
/* An union: the element must have one of the two class names to be selected */
.comment, .note { font-style: italic; font-size: 0.9em; font-weight: bold;}

• The result:

A AND predicate with a descendant selector to animate a Menu

• The menu in HTML

<ul class="HeaderMenu" > 
   <li><a href="/viz/obiee/" target="_parent">OBIEE</a></li>
   <li><a href="/dit/owb/" target="_parent">OWB</a></li>
   <li><a href="/data/warehouse/" target="_parent">DataWarehouse</a></li>
   <li><a href="/db/oracle/" target="_parent">Oracle Database</a></li>
</ul>

• The CSS

ul.HeaderMenu
{
  float:left;
  width:100%;
  padding:0;
  margin:0;
  list-style-type:none;
}
ul.HeaderMenu li {display:inline} /* To get the menu on 1 line */
ul.HeaderMenu a
{
  float:left;
  width:auto;
  text-decoration:none;
  color:white;
  background-color:purple;
  padding:0.2em 0.6em;
  border-right:1px solid white;
}
ul.HeaderMenu a:hover {background-color:#ff3300} /* The animation */