CSS selectors

CSS selectors are patterns used in CSS to target and style specific HTML elements on a web page. They tell the browser which elements to apply styles to, such as colors, fonts, spacing, or layouts. Common CSS selectors include element, class, ID, attribute, and pseudo-class selectors, making them essential for building responsive and well-structured websites.

Selector Type

Selector

Example

Description

Universal

*

* { margin: 0; padding: 0; }

Selects all elements on the page.

Type / Element

element

p { color: blue; }

Selects all <p> elements.

Class

.classname

.btn { background: red; }

 Selects elements with class btn.

ID

#idname

#header { font-size: 24px; }

 Selects the element with ID header.

Group

selector1, selector2

h1, h2, h3 { margin: 10px 0; }

Selects multiple elements at once.

Descendant

ancestor descendant

div p { color: green; }

Selects <p> inside <div> (any depth).

Child

parent > child

div > p { color: red; }

Selects direct child <p> of <div>.

Adjacent sibling

element + next

h1 + p { margin-top: 0; }

Selects the <p> immediately after <h1>.

General sibling

element ~ siblings

h1 ~ p { color: gray; }

Selects all <p> siblings after <h1>.

Attribute exists

[attr]

[title] { font-weight: bold; }

Selects elements with title attribute.

Attribute exact value

[attr="value"]

[type="text"] { border: 1px solid black; }

Selects elements with type="text".

Attribute contains word

[attr~="value"]

[class~="btn"] { padding: 5px; }

Selects elements with btn in class list.

Attribute starts with

[attr^="value"]

[href^="https"] { color: green; }

Selects elements where href starts with https.

Attribute ends with

[attr$="value"]

[src$=".jpg"] { border: 1px solid red; }

Selects elements where src ends with .jpg.

Attribute contains substring

[attr*="value"]

[class*="menu"] { font-size: 14px; }

Selects elements with menu anywhere in attribute.

Pseudo-class: first child

:first-child

p:first-child { font-weight: bold; }

Selects first child <p> in parent.

Pseudo-class: last child

:last-child

p:last-child { color: red; }

Selects last child <p> in parent.

Pseudo-class: nth-child

:nth-child(n)

li:nth-child(2) { background: yellow; }

Selects 2nd <li> in parent.

Pseudo-class: nth-of-type

:nth-of-type(n)

p:nth-of-type(2) { font-style: italic; }

Selects 2nd <p> of its type.

Pseudo-class: hover

:hover

a:hover { color: red; }

Selects element when mouse hovers over it.

Pseudo-class: focus

:focus

input:focus { outline: 2px solid blue; }

Selects element when focused.

Pseudo-class: not

:not(selector)

p:not(.intro) { color: gray; }

Selects all <p> except with class intro.

Pseudo-element: before

::before

p::before { content: "Note: "; }

Inserts content before element content.

Pseudo-element: after

::after

p::after { content: " ✔"; }

Inserts content after element content.

Pseudo-element: first-letter

::first-letter

p::first-letter { font-size: 200%; }

Styles first letter of element.

Pseudo-element: first-line

::first-line

p::first-line { font-weight: bold; }

Styles first line of element.

Combinator: group descendant

ancestor descendant

div p { color: green; }

Selects <p> inside <div> at any level.

Combinator: child

parent > child

ul > li { list-style: none; }

Selects direct child <li> of <ul>.

Combinator: adjacent sibling

element + next

h2 + p { margin-top: 0; }

Selects first <p> after <h2>.

Combinator: general sibling

element ~ siblings

h2 ~ p { color: gray; }

Selects all <p> after <h2>.

Use * carefully—it affects all elements and can slow down rendering on large pages.

Pseudo-classes like :hover and :nth-child() are dynamic and extremely useful for styling lists and menus.

Attribute selectors are great for targeting elements without adding extra classes or IDs.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors Example - Codekilla</title>

<style>

/* Universal Selector */
* {
  margin: 0;
  padding: 0;
}

/* Type / Element */
p {
  color: blue;
}

/* Class Selector */
.btn {
  background: red;
  color: white;
  padding: 5px;
}

/* ID Selector */
#header {
  font-size: 24px;
}

/* Group Selector */
h1, h2, h3 {
  margin: 10px 0;
}

/* Descendant Selector */
div p {
  color: green;
}

/* Child Selector */
div > p {
  color: red;
}

/* Adjacent Sibling */
h1 + p {
  margin-top: 0;
}

/* General Sibling */
h1 ~ p {
  color: gray;
}

/* Attribute exists */
[title] {
  font-weight: bold;
}

/* Attribute exact value */
[type="text"] {
  border: 1px solid black;
}

/* Attribute contains word */
[class~="btn"] {
  padding: 5px;
}

/* Attribute starts with */
[href^="https"] {
  color: green;
}

/* Attribute ends with */
[src$=".jpg"] {
  border: 1px solid red;
}

/* Attribute contains substring */
[class*="menu"] {
  font-size: 14px;
}

/* Pseudo-class first-child */
p:first-child {
  font-weight: bold;
}

/* Pseudo-class last-child */
p:last-child {
  color: red;
}

/* Pseudo-class nth-child */
li:nth-child(2) {
  background: yellow;
}

/* Pseudo-class nth-of-type */
p:nth-of-type(2) {
  font-style: italic;
}

/* Hover */
a:hover {
  color: red;
}

/* Focus */
input:focus {
  outline: 2px solid blue;
}

/* Not selector */
p:not(.intro) {
  color: gray;
}

/* Pseudo-element before */
.note::before {
  content: "Note: ";
}

/* Pseudo-element after */
.note::after {
  content: " ✔";
}

/* First letter */
.text::first-letter {
  font-size: 200%;
}

/* First line */
.text::first-line {
  font-weight: bold;
}

</style>
</head>

<body>

<h1 id="header">Codekilla CSS Selectors</h1>

<p class="intro">Intro paragraph</p>
<p>Second paragraph</p>

<div>
  <p>Paragraph inside div</p>
</div>

<button class="btn">Button</button>

<a href="https://example.com">Secure Link</a>

<input type="text" placeholder="Enter name">

<img src="image.jpg">

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<p class="note">Important message</p>

<p class="text">
This is an example paragraph demonstrating first line and first letter styling.
</p>

</body>
</html>
Newer
Learn Domains, DNS, IP Addressing & Bit Concepts
Back to list
Older WordPress Statistics 2026: Usage, Market Share & Security

Leave a Reply

Your email address will not be published. Required fields are marked *