Turning Learners into Developers
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 |
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 |
Child | parent > child | div > p { color: red; } | Selects direct child |
Adjacent sibling | element + next | h1 + p { margin-top: 0; } | Selects the |
General sibling | element ~ siblings | h1 ~ p { color: gray; } | Selects all |
Attribute exists | [attr] | [title] { font-weight: bold; } | Selects elements with |
Attribute exact value | [attr="value"] | [type="text"] { border: 1px solid black; } | Selects elements with |
Attribute contains word | [attr~="value"] | [class~="btn"] { padding: 5px; } | Selects elements with |
Attribute starts with | [attr^="value"] | [href^="https"] { color: green; } | Selects elements where |
Attribute ends with | [attr$="value"] | [src$=".jpg"] { border: 1px solid red; } | Selects elements where |
Attribute contains substring | [attr*="value"] | [class*="menu"] { font-size: 14px; } | Selects elements with |
Pseudo-class: first child | :first-child | p:first-child { font-weight: bold; } | Selects first child |
Pseudo-class: last child | :last-child | p:last-child { color: red; } | Selects last child |
Pseudo-class: nth-child | :nth-child(n) | li:nth-child(2) { background: yellow; } | Selects 2nd |
Pseudo-class: nth-of-type | :nth-of-type(n) | p:nth-of-type(2) { font-style: italic; } | Selects 2nd |
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 |
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 |
Combinator: child | parent > child | ul > li { list-style: none; } | Selects direct child |
Combinator: adjacent sibling | element + next | h2 + p { margin-top: 0; } | Selects first |
Combinator: general sibling | element ~ siblings | h2 ~ p { color: gray; } | Selects all |
Use | |||
Pseudo-classes like | |||
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>
