CSS Selectors

CSS selector types

There are several different types of selectors in CSS.
(1.) CSS element selector
(2.) CSS id selector
(3.) CSS class selector
(4.) CSS attribute selector
(5.) CSS universal selector

CSS element selector

HTML tag name use as a selector.

Program

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p{  
    text-align: center;  
    color: blue;  
}   
</style>  
</head>  
<body>  
<p>We can use html tag name for selector.  
</p>  
</body>  
</html>

Try in editor

CSS id selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element.

It is written with the hash character (#), followed by the id of the element.

Program

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#para1 {  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<p id="para1">Hello World </p>  
</body>  
</html>

Try in editor

CSS class selector

The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop symbol) followed by the class name.

A class name should not be started with a number.

Program

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.head1{  
    text-align: center;  
    color: blue;  
}  
</style>  
</head>  
<body>  
<h1 class="head1">This heading is blue and center-aligned.</h1>  
</body>  
</html>

Try in editor

CSS attribute selector

HTML attribute use as a selector.

Program

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p[title]{  
    text-align: left;  
    font-size:18px;  
}   
input[type='radio']{
    width:30px;
   height:30px;
}
</style>  
</head>  
<body>  
 <p title="good" > This is good boy. </p>
 <input type="radio">Male
</body>  
</html>

Try in editor

CSS universal selector

The CSS universal selector (*) select elements of any type. It select all elements on the web page.

Program

<!DOCTYPE html>  
<html>  
<head>  
<style>  
* {  
   color: orange;  
   font-size: 60px;  
}   
</style>  
</head>  
<body>  
<h2>This is h1 tag </h2>  
<p>This is p tag</p>  
 <div>This is div tag </div>
<span>This is span tag </span>
</body>  
</html>

Try in editor

About Us

Comsysapp.com is an educational website. Students and software developers can learn programming language tutorials. Comsysapp is very useful for beginners and professional developers. Comsysapp provides tutorial in easy language. Comsysapp.com has focus on simplicity.

Services

Comsysapp.com provides free tutorials like c, html, css, etc. All tutorials are free for beginner and professionals.

Terms of Use

comsysapp.com is not responsible for any mistake. We are not responsible if information made available on our website is incomplete or invalid. But comsysapp.com always try for zero-zero mistake.

Privacy policy

comsysapp.com does not collect any data from users. We use Google AdSense advertising on our website. We never ask personal or private information.

Sitemap

sitemap