Types of Selectors: Element, Class, ID
CSS selectors help in applying CSS style to a particular element or tag portion in an HTML web page. You have already read about CSS selectors in the previous topic, so let’s once again understand CSS selectors in a better way. You can apply mainly 3 types of CSS selector attributes for an HTML web page. In which, element CSS selector, class CSS selector, and id CSS selector, choice is default.
Element CSS Selector.
Element CSS selector is used to target a particular HTML web page tag element value or object and apply CSS selector style effect attributes. As an element CSS selector, you can apply specific object values and CSS selector properties to individual objects or all CSS object values at a time for a heading tag, paragraph tag, or any other tag in your web page.
CSS Element Selector syntax.
html tag element {
css property: tag value;
}
CSS Element Selector Example.
p {
color: teal;
font-family: times new roman; /* all paragraph text display with times new roman font */
font-size: 4rem;
}
CSS Element Selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Element Css Selector Script Code</title>
<body>
<style>
p {
color: lime; /* display p tag color lime */
font-size: 2em; /* display 2em paragraph text font size */
}
h1 {
font-family:Symbol;
color:red;
font-weight: bold; /*display heading1 tag bold effect */
}
h2 {
color:brown;
font-style: italic; /* display heading2 text italic format */
}
</style>
<p> This Is Element Css Selector Css Script Code</p>
<h1>This Is A Heading 1</h1>
<h2>This Is Heading 2</h2>
</body>
</html>
Element CSS Selector Usage – In CSS, element selector is used to style all tag elements in a particular HTML web page tag element with the same CSS properties attributes. For example, page paragraph, header text, etc., element CSS selector applies universal CSS style to the web page.
Class CSS Selector.
You can use a particular class CSS selector in an HTML web page to declare class tag attributes and apply CSS styles to a web page. Class attributes are first declared and defined in an HTML web page. Remember, classes in CSS are styled with a dot [.] and displayed in the web page CSS coding.
Class CSS Selector syntax.
.classname {
class css property: class value;
}
Class CSS Selector Example.
.highlight {
background-color: lime; /* class display or “highlight” with lime background color */
font-weight: bold;
font-size: 2em;
}
Individual use of class selector in HTML.
<p class=”highlight”>It Highlight Paragraph Text </p> /* display or “highlight” paragraph text with highlighted color */
<p>This paragraph is a simple paragraph and it is not highlighted.</p>
Class CSS Selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Class Css Selector Script Code</title>
<style>
.highlight {
background-color: aqua; /* display the highlighted class color with aqua */
font-weight: bold;
font-size: 27px; /* set the font text size 27px format*/
font-style: italic;
}
.display{
background-color: yellow; /* display the highlighted class color with yellow */
font-weight: bold;
font-size: 30px; /* set the font text size 30px format*/
font-style: italic;
}
</style>
<body>
<div class=”highlight”>Everything put in div class text highleted with aqua color.</div>
<p class=”highlight”>Paragraph text highlighted with same aqua color</p>
<p>It Is A Simple Paragraph, and it is not highlighted with class selector effect.</p>
<h1 class=”display”>The Heading text highlighted with same yellow color</h1>
</body>
</html>
Advantages of class CSS selector.
Class CSS selector is declared in HTML web page to reuse style attributes in other parts of the web page. Class CSS selector is used to apply same type of CSS class selector effect attributes and style to other tag elements of existing web page.
ID css selector.
ID CSS selector is used to apply CSS style attributes effect to a particular tag element in HTML web page by specifically targeting it. Remember, the ID selector properties in any HTML web page must be unique and different every time, and these ID attributes are previewed in CSS with a hash [#] symbol before the CSS declaration.
ID CSS selector syntax.
#uniqueidname {
id property: id value;
}
ID CSS selector example.
#main-paragraph {
color: brown; /* it add main-paragraph id color with brown */
font-size: 2em;
}
Use of the ID CSS selector in HTML tags.
<p id=”main-paragraph”>Simple Example of Paragraph Text </p>
ID css selector example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Id Css Selector Script Code</title>
<style>
#display {
color: yellow; /* display the text color yellow */
background-color: teal; /* display the teal backgroudn color */
padding: 20px; /* add padding effect 20px */
text-align: center; /* align class text in center */
font-family: monotype corsiva;
font-size: 2em; /* display the text font size 2em */
}
</style>
<body>
<div id=”display”>This Is The Id Css Selector Script Code</div>
<p>This Is A Ordinary Html Paragraph Text</p>
</body>
</html>
Advantages of ID CSS selector.
The ID selector attributes in any HTML web page allow web developers to target CSS styles to a single, unique element in a web page and apply styles and attributes with CSS. With CSS id attributes, you can apply particular CSS styles to particular web page element tags and attributes are applied only to id tag elements.
css selector explanation in HTML.
- element css selector – Style the tag element of a web page using the element selector in the current HTML web page, e.g., p tag, h1 tag, etc.
- class css selector – Style the same class tag element with unique .classname declared class in the current HTML web page.
- id css selector – Style the web page element using unique id #idname in the current HTML web page.
