Selector - Class Selector

> (World Wide) Web - (W3|WWW) > Selector API

1 - About

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

3 - Syntax

The Class selector names are:

  • the class name
  • preceded with a period.
.className1.classNameN
Advertising

3.1 - 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

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

4 - CSS Example

4.1 - 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:

Advertising

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

web/selector/class.txt · Last modified: 2019/02/09 11:43 by gerardnico