EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

Types of CSS Selectors

By Priya PedamkarPriya Pedamkar

Home » Software Development » Software Development Tutorials » CSS Tutorial » Types of CSS Selectors

Types of CSS Selectors

Introduction to Types of CSS Selectors

Types of CSS Selectors are used to choose the content that we want to style. It helps in selecting elements based on their class, id, type, etc. A CSS Selector is a component of the CSS Ruleset.

Types of CSS Selectors

There are 5 varieties of CSS Selectors available for us. We will be looking at the following important CSS Selectors:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  1. CSS Universal Selector.
  2. CSS Element Selector.
  3. CSS Id Selector.
  4. CSS Class Selector.
  5. CSS Attribute Selector.

1. CSS Universal Selector

In an HTML page, the content depends on HTML tags. A pair of tags defines a specific webpage element. The CSS universal selector selects all the elements on a webpage.

Example:

* {
color: blue;
font-size: 21px;
}

These two lines of code surrounded by the curly braces will affect all the elements present on the HTML page. We declare a universal selector with the help of an asterisk at the beginning of the curly brace. Universal Selector can be used along with the other selectors in combination. 

2. CSS Element Selector

CSS Element Selector is also known as a Type selector. Element Selector in CSS tries to match the HTML elements having the same name. Therefore, a selector of <ul> matches all the <ul> elements i.e. all the unordered lists in that HTML page.

Let us look at an example for the element selector.

Popular Course in this category
CSS Training (9 Courses, 9+ Projects)9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,454 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)jQuery Training (8 Courses, 5 Projects)

ul {
border: solid 1px #ccc;
}

To understand this better, let us look at an example HTML code to apply the CSS code that we have written above.

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div class="demo">
<p>Demo text</p>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3 </li>
</ul>

In this example, we will find mainly three elements namely the <ul> element, the <div> tag and another <ul> element. Since our CSS code applies to the <ul> tag specifically, the changes in the border will be done only for our <ul> tags, and not for the <div> tags. Usually, these changes do not apply to the content of the <ul> tags as well, but in some scenarios, the styles may apply to the inner elements.

3. CSS ID Selector

CSS ID selector helps the developer to match the ID created by the developer to its styling content. ID Selector is used with the help of the hash (#) sign before the ID name declared by the developer. ID selector matches every HTML element having an ID attribute with the value the same as that of the selector, without the hash sign.

Here’s an example:

#box {
width: 90px;
margin: 10px;
}

This CSS code can be used to match the element having the id ‘box’, like in the following sentence.

<div id=”box”></div>

Here, the tag <div> is just an example. We can write the ID attribute for any HTML tag. The ID Selector matches the ID attribute within the element and looks for its styling. In our example, the styling applies as long as any element contains the ID attribute ‘box’.

The value of the ID being used is supposed to be unique. If the same ID is used for two or more elements, the code is technically invalid, but the styling of the element will still apply, hence having the same ID is usually avoided.

Having to use a different ID every time for every HTML page, is quite rigid. Besides facing problems of rigidity, ID selectors in CSS also face the issue of specificity.

4. CSS Class Selector

The CSS Class selector is one of the most helpful selectors of all the selectors. It is declared by using a dot followed by the name of the class. This class name is defined by the coder, as is the case with the ID selector. The class selector searches for every element having an attribute value with the same name as the class name, without the dot.

Example:

.square {
margin: 20px;
width: 20px;
}

This CSS code can be used to match the element having the class ‘square, like in the following sentence.

<div class="square"></div>

This style also applies to all the other HTML elements having an attribute value for the class as ‘square’. An element having the same class attribute value helps us in reusing the styles and avoids unnecessary repetition. Additionally, the Class Selector is beneficial because it permits us to add several classes to a particular element. We can add more than one class to the attribute by separating each class with space.

Example:

<div class=”square bold shape”></div>

Here square, bold and shape are three different types of classes. 

5. CSS Attribute Selector

The CSS Attribute selector styles content according to the attribute and the attribute value mentioned in the square brackets. No spaces can be present ahead of the opening square bracket.

input[type="text"] {
background-color: #fff;
width: 100px;
}

This CSS code would be a match for the following HTML element.

<input type="text">

Similarly, if the value of the attribute ‘type’ changes, the Attribute selector would not match it. For example, the selector would not match the attribute if the value of ‘type’ changed from ‘text’ to ‘submit’. If the attribute selector is declared with only the attribute, and no attribute value, then it will match to all the HTML elements with the attribute ‘type’, regardless of whether the value is ‘text’ or ‘submit’.

Example:

input[type] {
background-color: #fff;
width: 100px;
}

We can also make use of attribute selectors with no specification of a value outside the square brackets. This will help us to target the attribute only, regardless of the element. In our example, it will target based on the attribute ‘type’, regardless of the element ‘input’. CSS Selectors help us to simplify our code and enable us to utilize and reuse the same CSS code for various HTML elements. They help us in styling specific segments and portions of our webpage. They provide us with the option of uniformly styling similar elements in our web page. CSS selectors are thus, an important part of the learning curve of CSS.

Recommended Articles

This has been a guide to Types of CSS Selectors. Here we have discussed the different types of CSS selectors with respective examples. You can also go through our other suggested articles to learn more –

  1. Cheatsheet CSS3
  2. CSS Interview Questions
  3. SASS vs SCSS
  4. SASS Interview Questions

CSS Training (9 Courses, 9+ Projects)

9 Online Courses

9 Hands-on Projects

61+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
CSS Tutorial
  • CSS
    • Introduction To CSS
    • What is CSS?
    • Uses Of CSS
    • Advantages of CSS
    • Career In CSS
    • CSS Commands
    • Is Css Case Sensitive
    • CSS object-fit
    • Types of CSS Selectors
    • CSS Radio Button
    • CSS Attribute Selector
    • CSS first child of class
    • CSS Selector nth Child
    • CSS Parent Selector
    • CSS Child Selector
    • CSS Not Selector
    • CSS Descendant Selector
    • CSS Inline Style
    • Checkbox CSS
    • CSS Appearance
    • CSS Font Properties
    • CSS font-variant
    • CSS Pagination
    • CSS Table Styling
    • CSS Table Cell Padding
    • CSS Padding Color
    • CSS Text Formatting
    • CSS for Text-Shadow
    • CSS text-stroke
    • CSS text-indent
    • CSS Rotate Text
    • CSS Text Color
    • CSS Center Div
    • CSS Arrow
    • CSS Arrow Down
    • CSS offset
    • CSS Cursor
    • CSS Layout
    • CSS Grid Layout
    • Button in CSS
    • CSS Button Border
    • text-align in CSS
    • CSS Horizontal Align
    • CSS Position
    • CSS Box Sizing
    • CSS box-shadow
    • CSS Text Underline
    • CSS Text Outline
    • CSS Blinking Text
    • Text Decoration CSS
    • CSS Vertical Align
    • CSS Word Wrap
    • CSS Padding
    • CSS Font Color
    • CSS Color Generator
    • CSS Margin Right
    • CSS Margin Color
    • CSS Color Codes
    • CSS Color Transparent
    • CSS Color Chart
    • CSS Link Color
    • CSS z-index
    • CSS Curved Border
    • CSS Border Left
    • CSS left
    • CSS Gradient Generator
    • Radial Gradient in CSS
    • CSS Shape Generator
    • CSS Triangle Generator
    • CSS background-color
    • CSS Background Image
    • CSS background-clip
    • CSS background-blend-mode
    • CSS Drop Shadow
    • CSS line height
    • CSS line break
    • Sticky Footer CSS
    • CSS Header Design
    • CSS Border Style
    • CSS Border Generator
    • Sticky Sidebar CSS
    • CSS Transparent Border
    • CSS Border Radius
    • CSS translate
    • CSS transform
    • CSS 3D Transforms
    • CSS Text Transform
    • CSS Transition Effects
    • CSS Transition Property
    • CSS Animation Transition
    • Negative Margin CSS
    • CSS Navigation Bar
    • CSS Overflow
    • CSS overflow-wrap
    • CSS Lists
    • CSS list-style
    • CSS Order
    • CSS Box Model
    • CSS Inner Border
    • CSS Icon
    • Menu Icon CSS
    • CSS Multiple Borders
    • Opacity in CSS
    • CSS Float Right
    • CSS Clear Float
    • CSS clip
    • CSS disabled
    • CSS Border Padding
    • Border Images in CSS
    • CSS Visibility
    • CSS Validator
    • CSS Clearfix
    • CSS Counter
    • CSS Letter Spacing
    • CSS root
    • CSS zoom
    • CSS calc()
    • CSS.supports()
    • CSS Loader
    • Media Query CSS
    • CSS @keyframes
    • CSS @bottom
    • CSS page-break-after Property
    • CSS page-break
    • CSS Position Fixed
    • CSS skew()
    • CSS Row
    • CSS Masking
    • CSS Scrollbar
    • CSS Overlay
    • CSS Important
    • CSS Cursor Hand
    • CSS Inherit
    • CSS Position Relative
    • CSS Compressor
    • CSS tricks
    • CSS Outline Property
    • CSS Flexbox Properties
    • CSS flex-direction
    • CSS content property
    • CSS Typography
    • CSS Formatter
    • CSS nowrap
    • CSS Column
    • GridView CSS
    • CSS Viewport
    • CSS Minify
    • CSS Combinators
    • CSS in React
    • CSS Matrix 
    • CSS Pseudo Elements
    • CSS Pseudo Classes
    • CSS Pointer Events
    • CSS Resize
    • CSS Inheritance
    • CSS Interview Questions
    • Cheat Sheet CSS
  • CSS3
    • What is CSS3?
    • CSS3 Interview Questions
    • Cheat sheet CSS3
  • sass
    • How to Install SASS
    • SASS Interview Questions
    • What is Sass
    • SASS Comments
    • Sass Variables
    • SASS Import
    • SASS if else
    • SASS Nesting
    • SASS @each
    • SASS @at-root
    • SASS @extend
    • SASS @media
    • SASS @for
    • SASS Map
    • SASS Selectors
    • SASS Color Functions
    • SASS Mixins

Related Courses

CSS Training Course

Bootstrap Training Course

JQuery Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - CSS Training (9 Courses, 9+ Projects) Learn More