class Selector
CSS class Selector reference
The CSS class selector ( X.class { } ) is used to target and style elements that have a common HTML class attribute value in the document. Using it without specifying an element type in front of it will be a universal element type selection for the class. Using it with the element type in front of it will affect only that specified type and not others.
Notes: Even though the paragraph element has the same class name it does not get styled because it is not the specified element while DIV is the specified element to target only if it has that class name. Also notice how the other DIV element on the page does not get styled because it does not have the class name of "myClass".
All elements class selection
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
.myClass {
background: #BFDFFF;
border:#06C 1px solid;
padding:10px;
}
</style>
<div class="myClass">Content inside my div...</div>
<p class="myClass">Content inside my paragraph...</p>
<div>Content inside my div...</div>
<div class="myClass">Content inside my div...</div>
<style type="text/css">
.myClass {
background: #BFDFFF;
border:#06C 1px solid;
padding:10px;
}
</style>
<div class="myClass">Content inside my div...</div>
<p class="myClass">Content inside my paragraph...</p>
<div>Content inside my div...</div>
<div class="myClass">Content inside my div...</div>
Content inside my div...
Content inside my paragraph...
Content inside my div...
Content inside my div...
Element type class selection
CSS CODE EXAMPLE
<style type="text/css">
div.myClass {
background: #BFDFFF;
border:#06C 1px solid;
padding:10px;
}
</style>
<div class="myClass">Content inside my div...</div>
<p class="myClass">Content inside my paragraph...</p>
<div>Content inside my div...</div>
<div class="myClass">Content inside my div...</div>
div.myClass {
background: #BFDFFF;
border:#06C 1px solid;
padding:10px;
}
</style>
<div class="myClass">Content inside my div...</div>
<p class="myClass">Content inside my paragraph...</p>
<div>Content inside my div...</div>
<div class="myClass">Content inside my div...</div>
Content inside my div...
Content inside my paragraph...
Content inside my div...
Content inside my div...
0 Response to "class Selector"
Post a Comment