Selector - Class Selector

Chrome Devtool Selector

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

Discover More
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
Chrome Devtool Selector
How to select elements based on attribute ? (with the css selector API)

How to select elements based on attribute ? (with the selector API , css) API This page is about selector expressions that select elements based on attribute. * An ID selector and a class selector...
Chrome Devtool Selector
Selector - Not

not is a logical pseudo-class that negates its expression. Its selects elements that are not represented by its arguments. Example of a selector when the element has the class fade but not the class...
Chrome Devtool Selector
Selector API

API A selector is a boolean expression (known also as predicate) that match against elements in a DOM tree in order to select one or several node. This API was known before as the CSS and was renamed...
Chrome Devtool Selector
Selector API - Selector Group (OR,Union)

selector can be grouped to form another selector on a union level with a comma. Example: selector a or selector b attribute level Eattfooatt2 An union or an or is accomplished be separating the...
Chrome Devtool Selector
What is the asterisk selector (known as Universal Selector)

The universal selector is the star character. (002aasterisk U+002A It permits to select all type of tag element. The selection matchs any tag name. All descendant elements of the body that have a...

Share this page:
Follow us:
Task Runner