Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Class Selector

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:
• position:absolute
• Set the box-sizing Property
• position:relative
• Set the Border Color
• Set the Font Variant
• Set an Element's Padding
• Set a Fixed Background Image
• Set an Element's Overflow
• Style the First Letter
• Pseudo-class Selectors

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268