Scribd
Upload
125 views17 pages

Class Selector and ID Selector

The document discusses different CSS selectors including universal, type, class, ID, and pseudo selectors. The universal selector selects all elements, ID selectors uniquely identify a single element, and class selectors can be used to style multiple similar elements. Pseudo-elements like ::first-letter can style parts of an element, and pseudo-classes like :hover can style elements based on their state. Examples are provided of how to use each selector type in CSS code and HTML documents.

Uploaded by

Isuru Madushan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
125 views17 pages

Class Selector and ID Selector

The document discusses different CSS selectors including universal, type, class, ID, and pseudo selectors. The universal selector selects all elements, ID selectors uniquely identify a single element, and class selectors can be used to style multiple similar elements. Pseudo-elements like ::first-letter can style parts of an element, and pseudo-classes like :hover can style elements based on their state. Examples are provided of how to use each selector type in CSS code and HTML documents.

Uploaded by

Isuru Madushan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

Class Selector and ID Selector

CREATED BY MODULE LECTURER M.V.P KARUNARATHNE.


Universal Selector *
The universal selector works like a wild card character, selecting all elements on a page.
Every HTML page is built on content placed within HTML tags. Each set of tags represents
an element on the page

*{
color:#09F;
font-size: 20px;
line-height: 25px;
margin: 0;
padding: 0;
}
Style div
<p>This is some text.</p>

<div style="color:#936">
<h3>Sample heading wthin div tags</h3>
<p>This is some text in a div element.</p>
<p>This is another Paragraph .</p>
</div>
<div style="color:#F36">
<h3>Sample heading wthin div tags</h3>
<p>This is some text in a div element.</p>
<p>This is another Paragraph .</p>
</div>
ID selector
Used to uniquely identify that element from other elements on the page.
Giving an element a unique identity allows you to style it differently than any other instance of the
same element on the page.
It is important that no two elements on the same page have the same value for their id attributes
(otherwise the value is no longer unique).
Name preceded by a hash character (“#”)
#content
Example
#content {
margin: 30px;
padding-bottom: 20px;
text-align: justify;
width: 140px;
color: red;
background-color: #CFF;}

#samp {
height: 200px;
width: 140px;
background-color: #9F0;}
Cont’d
<div id="content"> <div id="samp">
<h1>sample id</h1> <h1>Content</h1>
<br> <p>ID can be used to identify one
element.one unique element</p>
<p>Any HTML element can have the id
attribute applied to it. The value of this <p>sample para</p>
attribute is the element's unique identifier</p>
</div>
<p> ID can be used to identify one
element</p>
</div>
CSS class and ID
ID's are unique
Each element can have only one ID
Each page can have only one element with that ID

Classes are NOT unique


You can use the same class on multiple elements.
You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects on a page
should be done with a class
Class Selector
You should use classes when your style needs to be applied multiple times on the same
page.
You declare a CSS class with meaning full class name by using a dot (.)
.myclass{
color:#0C6;
font-weight: bold;
}
Can be used with any element

<H1 class="myclass">Class style for My heading</H1>


<p class="myclass">This is sample class for paragraph</p>
<H2 class="myclass">This class example</H2>
Use of classes
Class style only for p
p.parastyle { background-color:#FFC;
color:#03F;}

Class style only for H1


H1.hstyle { background-color:#993;
color:#03F;
text-transform: uppercase; }
Cont’d
p{
width: 200px;
border: 2px solid #0088dd;
padding: 10px;
background:#FCC;}

p.myClass{
margin: 30px;
}
<p>Analog synthesizers are often said to have a "warmer" sound than their digital counterparts.</p>
<p class="myClass">Analog synthesizers are often said to have a "warmer" sound than their digital
counterparts.</p>
p{
Multiple classes
width: 200px;
border: 2px solid #0088dd;
padding: 10px;
background:#FCC;}

.highlight { font-weight: bold; }


.indent { padding-left: 2em; }

.warning { background-color: red;


color: white; }
Use of multiple class
<p>Any styling information that needs to be applied to multiple objects on a page should
be done with a class</p>

<p >You can use the same class on multiple elements as well as multiple classes in same
element.</p>

<p class="highlight indent">This paragraph contains the styles of highlight and indent
classes .</p>

<p class="highlight “>Highlighting style only.</p>

<p>Class can be embedded <em class="warning" >appropriately</em></p>


Use of class and ID in same page
classIDExample.html
Pseudo-elements
Acts like an extra element is in the code.
are used to address sub-parts of elements. They allow you to set style on a
part of an element's content beyond what is specified in the documents.
p::first-line {
color: blue;
text-transform: uppercase;
}

p::first-letter {
color:#F00;
font-weight: bold;
}
Pseudo-class
A pseudo.-class is way of specify a state.

a:link { color: blue } /* Unvisited links */


a:visited { color: purple } /* Visited links */
a:hover { font-weight: bold } /* User hovers */
a:active { color: lime } /* Active links */

<a href="https://www.google.com">Go to google</a>


Links to refer
https://www.youtube.com/watch?v=qKoajPPWpmo
https://tutorial.techaltum.com/cssselectors.html
https://beginnersbook.com/2014/05/css-selectors-element-id-and-class/
https://www.youtube.com/watch?v=2WjvoIpdBng
END

You might also like