Selector - Class Selector


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


The shorthand Class selector names are:

  • the class name
  • preceded with a period.

The same fully qualified is based on attribute selection


One class

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

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  */
/* Same as */
/* An element with the class y AND axis  */
/* Same as */

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


  • 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>
  • The CSS
ul.HeaderMenu li {display:inline} /* To get the menu on 1 line */
ul.HeaderMenu a
  padding:0.2em 0.6em;
  border-right:1px solid white;
ul.HeaderMenu a:hover {background-color:#ff3300} /* The animation */

Powered by ComboStrap