Class Selector (.)

This style specification has a rule that says div tags will be 500x500 pixels and white. “.” is a selector used to match elements of a given class. This example defines a class called mydiv with width and height set to 100 pixels and background colour set to grey. It is a more specific rule that the element selecltor, but it only applies to elements of class mydiv. A class selector rule can be overridden with a more specific rule, such as one that selects id. The order of in which the element, id and class selectors as specified makes no difference with respect to the rule specificity. An id selector is more specific than a class selector. An a class selector is more specific than an element selector. Given this, what is the background color for div1, div2, div3, and div4? Use a class selector for a collection of things that will be styed in the same way. Can you think of an example of this in practice? Consider what might be defined as a class in web sites you visit regularly.

HTML

<div id="div1"  class="mydiv"> This is div 1  </div>
<div id="div2"  class="mydiv"> This is div 2  </div>
<div id="div3"  class="mydiv"> This is div 3  </div>
<div id="div4"  > This is div 4</div>

CSS

/*
  * Try this:
  * 1. What changes would make all small div elements green?
  * 2. What change would make all squares blue?
  */

.mydiv  { width: 100px; height: 100px; background: green;}
 
#div1 {background: green;} 
 
div { width: 500px; height: 500px; background: blue;}