Html css selectors types with examples
HTML and CSS are the building blocks of web development, enabling developers to create visually appealing and interactive websites. One of the fundamental concepts in styling web pages is the use of selectors. Selectors are patterns used to select and style HTML elements, allowing developers to apply various styles to different parts of a webpage. In this article, we will delve into HTML and CSS selectors, exploring their types and providing Html css selectors types with examples.
HTML CSS Selectors:
HTML CSS selectors are used to target specific HTML elements for styling or manipulation. The most basic selector is the element selector, which selects elements based on their tag name. For instance, to style all paragraphs in a document, you can use the following CSS rule:
CSS Syntax
Selector {Property 1:value 1; Property 2:value 2;}
p {
color: blue;
font-size: 16px;
}
This CSS rule will apply the specified styles to all <p> (paragraph) elements in the HTML document.
Types of CSS Selector
1) Universal Selector
2) ID Selector
3) Tag Selector
4) Class Selector
5) Group Selector
6 ) Attribute Selector
1) Universal Selector-
It is used for selecting all element on a page.
Syntax-
* {
Style Properties;
}
<!DOCTYPE html>
<html>
<head>
<style>
*
{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p>Welcome in Universal Tag !</p>
<p>And me!</p>
</body>
</html>
Output
2) ID Selectors:
ID selectors are prefixed with a hash (#) and are used to select a single element with a specific ID attribute. IDs are meant to be unique on a page, and thus, an ID selector targets a single element. Here’s an example:
<html>
<head>
<style>
#para
{
text-align: center;
color: red;
font-weight:bold;
}
</style>
</head>
<body>
<p id=”para”>Hello World!</p>
<p>This paragraph is not affected by the style here the #para is not working becoz here we do not use id #para. </p>
</body>
</html>
Output
3) Tag Selector-
The tag selector in CSS is used to select and style HTML elements based on their tag name. The tag name is the name of the HTML element, such as <p> , <h1> , <div> , etc. To use a tag selector, you simply specify the tag name you want to select, preceded by a period ( . )
p {
text-align:center;
color:red;
}
<html>
<head>
<style>
body
{
background-color:green;
}
p
{
text-align:center;
color:red;
}
h1
{
color:white;
}
</style>
</head>
<body>
<h1> This is Tag Selector</h1>
<p> This is the Tag selector example</p>
</body>
</html>
4) Class Selectors:
Class selectors are prefixed with a dot (.) and are used to select elements with a specific class attribute. Classes are a way to group and style multiple elements with the same characteristics. Here’s an example:
<html>
<head>
<style>
.abc
{
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class=”abc”>This paragraph is highlighted.</p>
</body>
</html>
Output
5) Group Selector–
The grouping selector selects all the HTML elements with the same style definitions.
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output
6) Attribute Selectors:
Attribute selectors allow you to select elements based on their attributes. You can target elements with a specific attribute, attribute value, or a combination of both. The Generic syntax consist of square brackets([ ]) containing an attribute name followed by an option condition to match against the value of attributre. For example:
<input type=”text” required>
input[required] {
border: 2px solid red;
}
i) CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:
<!DOCTYPE html>
<html>
<head>
<style>
a[target]
{
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href=”https://careersknowledge.in/html-css-selectors-types-with-
examples/” target=”_blank”>Olevel Notes</a>
<a href=”http://www.disney.com”>disney.com</a>
<a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>
</body>
</html>
Output
ii) CSS [attribute=”value”] Selector
The selector is used to select elements with a specified attribute and value.
The following example selects all <a> elements with a target=”_blank” attribute:
<!DOCTYPE html>
<html>
<head>
<style>
a[target=”_top”]
{
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href=”https://careersknowledge.in/html-css-selectors-types-with-examples/” target=”_blank”>Olevel Notes</a>
<a href=”http://www.disney.com” target=”_blank”>disney.com</a>
<a href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>
</body>
</html>
Output
iii) CSS [attribute~=”value”] Selector
The [attribute~=”value”] selector is used to select elements with an attribute value containing a specified word.
The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is “flower”:
<html>
<head>
<style>
[title~=”flower”]
{
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~=”value”] Selector</h2>
<p>All images with the title attribute containing the word “flower” get a yellow border.</p>
<img src=”Desert.jpg” title=”klematis flower” width=”150 height=”113>
<img src=”Desert.jpg” title=”flower” width=”224 height=”162>
<img src=”Desert.jpg” title=”tree” width=”200 height=”358>
</body>
</html>
Output
iv) CSS [attribute|=”value”] Selector
The selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
Note: The value has to be a whole word, either alone, like class=”top”, or followed by a hyphen( – ), like class=”top-text”.
<!DOCTYPE html>
<html>
<head>
<style>
[class|=”top”] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|=”value”] Selector</h2>
<h1 class=”top-header”>Welcome</h1>
<p class=”top-text”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>
Output
v) CSS [attribute^=”value”] Selector
The selector is used to select elements with the specified attribute, whose value starts with the specified value.
The following example selects all elements with a class attribute value that starts with “top”:
<!DOCTYPE html>
<html>
<head>
<style>
[class^=”top”]
{
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^=”value”] Selector</h2>
<h1 class=”top-header”>Welcome</h1>
<p class=”text-top”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>
Output
vi) CSS [attribute$=”value”] Selector
The selector is used to select elements whose attribute value ends with a specified value.
The following example selects all elements with a class attribute value that ends with “test”:
<!DOCTYPE html>
<html>
<head>
<style>
[class$=”top”]
{
background:yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$=”value”] Selector</h2>
<h1 class=”headertop”>Welcome</h1>
<p class=”text-top”>Hello world!</p>
<p class=”topcontent”>Are you learning CSS?</p>
</body>
</html>
Output
vii) CSS [attribute*=”value”] Selector
The selector is used to select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains “te”:
<!DOCTYPE html>
<html>
<head>
<style>
[class*=”te”]
{
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*=”value”] Selector</h2>
<div class=”first_test”>The first div element.</div>
<div class=”second”>The second div element.</div>
<div class=”my-test”>The third div element.</div>
<p class=”mytest”>This is some text in a paragraph.</p>
</body>
</html>
Output
Thanks For Learning the Html css selectors types with examples.
Also Checkout Our Latest Update
Html css and types of css with examples