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 */