CSS Selectors — PBA Institute CSS Tutorial
Chapter 02 · CSS Tutorial Series
10 min read Beginner

CSS Selectors

A CSS Selector is a pattern used to select and target HTML elements that you want to style. Selectors are the bridge between your HTML structure and your CSS rules. Mastering selectors helps you write clean, reusable, and precise stylesheets for any web project.

What is a CSS Selector?

  • Definition: A selector picks the HTML element(s) on which a style rule should apply.
  • Targeting: You can target a single element, a group of elements, or elements based on attributes/states.
  • Cascade: Multiple selectors can apply to the same element; specificity decides which one wins.
  • Reusable: Class and ID selectors let the same style be reused or applied uniquely across pages.

Types of CSS Selectors

🔤

Element Selector

Selects all elements of a given tag name, e.g. p selects all paragraphs.

🏷️

Class Selector

Selects elements that share a class name. Starts with a dot — .box.

🆔

ID Selector

Selects a single element with a unique ID. Starts with a hash — #header.

🌐

Universal Selector

Selects every element in the document using *.

👨‍👧

Group Selector

Applies the same style to multiple selectors separated by commas.

🎯

Attribute Selector

Selects elements by attribute, e.g. input[type="text"].

Selectors in CSS

Selectors in CSS are tools used to apply styles to specific elements in HTML documents. They allow developers to target elements based on element name, class, ID, attributes, or relationship with other elements.

Element Selector

The Element Selector targets all instances of a specific HTML element.

CSS Code 
h5 {
    color: red;
    /* other styles */
}
Output All h5 elements will appear in red color.

Class Selector

The Class Selector targets elements that have a specific class attribute. It is used to style multiple elements with the same design.

CSS Code 
.pba {
    color: red;
    font-weight: bold;
    /* other styles */
}
HTML Code 
<!DOCTYPE html>
<html>
<head>
    <title>Class Selector</title>
</head>
<body>

    <h4 class="pba">PBA INSTITUTE</h4>

</body>
</html>
Output The text “PBA INSTITUTE” will appear red and bold.

ID Selector

The ID Selector targets a single unique element using its ID attribute. IDs should be unique within an HTML document.

CSS Code 
#pba {
    background-color: #f0f0f0;
    padding: 10px;
    /* other styles */
}
HTML Code 
<div id="pba">
    <h1>PBA INSTITUTE</h1>
    <p>Welcome to PBA INSTITUTE!</p>
</div>
Output The selected div gets a light background color and padding.

Conclusion

CSS selectors provide powerful ways to target and style HTML elements. Element selectors, class selectors, and ID selectors help developers control webpage design clearly and efficiently.

Code Explanation

  • * {}: Universal selector resets default browser margin and padding.
  • h1: Element selector — styles every h1 tag.
  • .highlight: Class selector — applies yellow background to elements with class="highlight".
  • #main: ID selector — adds border and spacing to the element with id="main".

Selector Reference Table

Selector Example Meaning
Element p All <p> tags
Class .btn All elements with class="btn"
ID #title Element with id="title"
Universal * Every element on the page
Group h1, h2, p h1, h2 and p elements together
Descendant div p p inside div

Selector Categories

Simple Selectors

Element, class, ID, and universal selectors used in everyday styling.

Combinator Selectors

Descendant (space), child (>), adjacent (+), and general sibling (~).

Pseudo-class Selectors

States like :hover, :focus, :nth-child().

Common Selector Symbols

Type
element .class #id *
Combinator
A B A > B A + B A ~ B
Pseudo-class
:hover :focus :nth-child(n)
Attribute
[type="text"] [href^="https"]

Important Notes

  • ID is unique: An ID should only appear once per HTML page.
  • Specificity: ID > Class > Element. Inline styles override all.
  • Reusability: Prefer classes over IDs for styling — they are reusable and easier to maintain.
  • Keep it simple: Avoid overly long selectors; short selectors render faster.

Real-World Use Cases

Theme Styling

Element selectors style entire site uniformly.

Component Reuse

Classes style reusable cards, buttons, forms.

Unique Sections

IDs target single sections like the page header or footer.

Practice Questions

  • Write a CSS rule to color every paragraph red using an element selector.
  • Create a class .card with a white background and rounded corners.
  • Use a group selector to apply the same color to h1, h2 and h3.
  • Style a unique element with id header to have a fixed position.
  • Write a descendant selector that targets all li items inside a nav.

Frequently Asked Questions

  • What is a CSS selector: A selector targets HTML elements so CSS rules can style them.
  • Difference between class and ID: Classes are reusable on many elements; an ID must be unique per page.
  • Can I combine selectors: Yes — group, descendant, child, and pseudo-class combinations are common.
  • Which selector is fastest: Simple ID and class selectors are the fastest for browsers to match.

Conclusion

CSS selectors are the foundation of styling. Mastering element, class, ID, group, attribute, and pseudo-class selectors enables you to target any HTML element precisely and build clean, maintainable websites.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to Introduction Chapter

Next

Go to Style Sheet Insertion Chapter