Class Selector
By Stephen Bucaro
A CSS style sheet consists of rules that define how html elements should be
displayed on a webpage. Each rule consists of one or more selectors, one
or more properties, and one or more values that each property
should be set to.
In some cases, you want to set the style for all elements of a certain type, for
example you might want to set the background color for all span elements. In
that case you would use a class selector. An example of a class selector is shown below.
.bluebkgnd
{
background-color: blue;
}
Note that In the style rule definition, the class selector's name is prefixed with a dot.
This rule sets the background color of every element with the class attribute bluebkgnd
to blue. After defining the class selector, you go through your html code and apply that
class to each span that belongs to the bluebkgnd class as shown below.
<span class="bluebkgnd">Span Text</span>
The class selector is very powerful because not only does it allow you to select
multiple elements of the same type, but you can also select elements of other types
to belong to the same class. An example of applying the .bluebkgnd class to a div
element is shown below.
<div class="bluebkgnd">Span Text</div>
This sets the background color of the div element with the class attribute bluebkgnd to blue.
What if you created a class, say named mystyle, which you applied to several
different types of elements. You want to also apply the rules of the mystyle
class to div elements, but instead of blue text you want divs to display red text.
You could derive a mystyle class that applies only to divs, as shown below.
.mystyle
{
font-family: verdana;
font-size:12px;
font-weight: bold;
color:blue;
}
div.mystyle
{
color:red;
}
<span class="mystyle">Span Text</span>
<div class="mystyle">Div Textv/div>
Note in the second selector, the class named mystyle is prefixed with the
div element selector. Now all elements of the mystyle class will have
the specified font and text in blue, except divs of the mystyle class will
display red text. You've saved yourself from having to write a new class with all
but one rule the same.
More CSS Quick Reference:
• Set an Element's Clipping
• How to Use a CSS ID Selector
• position:absolute
• nth-child Selector
• Highlight Text
• Set a Background Image's Position
• Set the box-sizing Property
• Set the Border Width
• Set the border-collapse
• Set the Text Alignment
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
