CSS Selectors

CSS selectors are used to select HTML elements that you want to style. They define which elements a CSS rule applies to. Selectors are one of the most important concepts in CSS.

Types of CSS Selectors

There are several types of CSS selectors, each used for different purposes. Below are the most commonly used selectors in CSS.

1. Element Selector

The element selector selects all HTML elements of a specific type.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
p {
  color: blue;
  text-align:center;
}
</style>
</head>
<body>

<p>CSS controls layout and design.</p>

</body>
</html>

Try this code

This rule applies to all <p> elements on the page.

2. Class Selector

The class selector selects elements with a specific class attribute. It is written using a dot (.) followed by the class name.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
.highlight {
  background-color: yellow;
  text-align:center;
}
</style>
</head>
<body>

<p class="highlight">Yellow background, centered text looks nice.</p>

</body>
</html>

Try this code

This rule applies to all elements with the class highlight.

3. ID Selector

The ID selector selects a single unique element. It is written using a hash (#) followed by the ID name.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
#center {
 text-align:center;
}
</style>
</head>
<body>

<p id="center">This text is only centered here.</p>

</body>
</html>

Try this code

An ID should be used only once on a page.

4. Grouping Selector

The grouping selector allows you to apply the same styles to multiple selectors at once.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
h1, h2, p {
  color:purple;
}
</style>
</head>
<body>

<h1>First Heading</h1>
<h2>Second Heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Try this code

5. Universal Selector

The universal selector selects all elements on the page. It is represented by an asterisk (*).

Example

<!DOCTYPE html>
<html>
<head> 
<style>
* {
  color:red;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<p>CSS styles web pages beautifully.</p>

</body>
</html>

Try this code

6. Descendant Selector

The descendant selector selects elements that are inside another element.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
div p {
  color: green;
}
</style>
</head>
<body>

<div>
<h2>Descendant</h2>
<p>Green color makes this text fresh.</p>
</div>

</body>
</html>

Try this code

This rule selects all <p> elements inside a <div>.

7. Child Selector

The child selector selects elements that are direct children of a specified element.

ul > li {
  list-style-type: square;
}

8. Attribute Selector

The attribute selector selects elements based on the presence or value of an attribute.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
input[type="text"] {
    border: 2px solid red;
    width:100px;
    padding: 8px;
    border-radius: 4px;
}
</style>
</head>
<body>

Search: <input type="text" name="search">

</body>
</html>

Try this code

9. Pseudo-class Selector

Pseudo-classes define a special state of an element, such as hover or focus.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
a:hover {
  color: red;
}
</style>
</head>
<body>

<a href="https://www.completecodehub.com">completecodehub.com</a>

</body>
</html>

Try this code

Pseudo-class Categories

Link Pseudo-classes

a:hover a:active a:visited a:link

Form Pseudo-classes

input:focus input:checked input:disabled input:required

Structural Pseudo-classes

   
li:first-child li:last-child li:nth-child(n)

Other Common Pseudo-classes (With Explanation)

a:active — Applies style when a link is being clicked.

a:visited — Styles a link that has already been visited.

input:focus — Applies style when an input field is focused.

li:first-child — Selects the first child element inside its parent.

li:last-child — Selects the last child element inside its parent.

li:nth-child(n) — Selects elements based on their position number.

input:checked — Targets checked checkboxes or radio buttons.

input:disabled — Styles disabled form elements.

10. Pseudo-element Selector

Pseudo-elements style specific parts of an element.

Example

<!DOCTYPE html>
<html>
<head> 
<style>
p::first-letter {
  font-size: 24px;
  font-weight: bold;
}
</style>
</head>
<body>

<p>CSS is used to style HTML elements and make web pages look attractive.</p>

</body>
</html>

Try this code

Pseudo-elements Explained

p::first-letter — Styles the first letter of a paragraph.

p::first-line — Styles the first line of a paragraph.

::selection — Styles the text selected by the user.

input::placeholder — Styles the placeholder text inside an input field.

div::before — Inserts content before an element.

div::after — Inserts content after an element.

li::marker — Styles the list item marker (bullet or number).

Selector Priority (Specificity)

When multiple CSS rules target the same element, the browser decides which rule to apply based on specificity.

ID selectors have the highest priority
Class selectors come next
Element selectors have the lowest priority

Why CSS Selectors Are Important

They allow precise styling of elements
They improve code organization
They make CSS reusable and scalable
They help create responsive and interactive designs

Tip: Use class selectors for most styling needs and avoid overusing ID selectors.