CSS Selectors are patterns used in CSS to select and target HTML elements so that styles can be applied to them. They define which elements on a web page should receive specific styling rules.
CSS selectors are commonly grouped into five main categories:
Basic selectors in CSS are simple tools used for selecting by HTML element name, class, ID, or universally for all elements.
*)The universal selector selects all elements on the page and applies the same style universally.
Example: Setting the font color for every element.
<html>
<head>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>Header Text</h1>
<p>Paragraph Text</p>
</body>
</html>
The element selector targets all elements of a specific type, such as paragraphs or headings.
Example: Setting a common font size for all paragraphs.
<html>
<head>
<style>
p {
font-size: 16px;
}
</style>
</head>
<body>
<p>This paragraph is styled with font size 16px.</p>
</body>
</html>
.)The class selector applies styles to elements with a specific class attribute.
Example: Making all buttons have a blue background.
<html>
<head>
<style>
.button {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<button class="button">Click Me!</button>
</body>
</html>
#)The ID selector styles a single element identified by its unique id.
Example: Changing the background color of a header.
<html>
<head>
<style>
#header {
background-color: gray;
}
</style>
</head>
<body>
<div id="header">This is the header section.</div>
</body>
</html>
Combinator selectors define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document. Common combinators include descendant, child, adjacent sibling, and general sibling.
The descendant selector targets an element inside another element.
Example: Styling paragraphs inside a div.
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>This paragraph inside a div will be red.</p>
</div>
</body>
</html>
>)The child selector affects only the direct child elements of a parent.
Example: Styling direct child paragraphs of a div.
<html>
<head>
<style>
div > p {
margin-left: 20px;
}
</style>
</head>
<body>
<div>
<p>This is a direct child and has a left margin.</p>
<div>
<p>This is not a direct child.</p>
</div>
</div>
</body>
</html>
+)The adjacent sibling selector styles an element immediately following another.
Example: Making the first paragraph bold after an h1.
<html>
<head>
<style>
h1 + p {
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This immediately follows the header and is bold.</p>
<p>This will not be bold.</p>
</body>
</html>
~)The general sibling selector styles all siblings that follow a specific element.
Example: Italicizing all paragraphs following an h1.
<html>
<head>
<style>
h1 ~ p {
font-style: italic;
}
</style>
</head>
<body>
<h1>This is a header.</h1>
<p>This is a sibling of the header and will be italicized.</p>
<p>This will also be italicized because it is a sibling of the header.</p>
</body>
</html>
Attribute selectors target elements based on the presence or value of their attributes.
The presence selector selects elements that contain a specific attribute.
Example: Styling all inputs with a type attribute.
<html>
<head>
<style>
input[type] {
border: 2px solid black;
}
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="number" placeholder="Number input">
</body>
</html>
This selector targets elements with a particular attribute value.
Example: Styling text inputs.
<html>
<head>
<style>
input[type="text"] {
background-color: yellow;
}
</style>
</head>
<body>
<input type="text" placeholder="Text input">
<input type="password" placeholder="Password input">
</body>
</html>
^=)The starts with selector matches elements whose attribute value begins with a given string.
Example: Styling links with https in their href.
<html>
<head>
<style>
a[href^="https"] {
color: navy;
}
</style>
</head>
<body>
<a href="https://example.com/">Secure link</a>
<a href="http://example.com/">Non-secure link</a>
</body>
</html>
*=)The contains selector matches elements where the attribute value contains a specific string.
Example: Underlining links with example in the URL.
<html>
<head>
<style>
a[href*="example"] {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="https://example.com/">This contains "example" and is underlined.</a>
<a href="https://otherlink.com/">This is not underlined.</a>
</body>
</html>
$=)The ends with selector matches elements whose attribute value ends with a specific string.
Example: Styling links that end with .pdf.
<html>
<head>
<style>
a[href$=".pdf"] {
color: navy;
}
</style>
</head>
<body>
<a href="notes.pdf">Open PDF</a>
<a href="notes.docx">Open DOCX</a>
</body>
</html>
~=)The word match selector matches elements whose attribute contains a specific whole word.
Example: Styling elements that have the class highlight among multiple class names.
<html>
<head>
<style>
p[class~="highlight"] {
background: yellow;
}
</style>
</head>
<body>
<p class="note highlight">This paragraph is highlighted.</p>
<p class="note">This paragraph is not highlighted.</p>
</body>
</html>
|=)The hyphen match selector matches elements whose attribute value starts with a word followed by a hyphen.
Example: Styling elements with language attributes like en or en-US.
<html>
<head>
<style>
p[lang|="en"] {
color: navy;
}
</style>
</head>
<body>
<p lang="en">This paragraph matches.</p>
<p lang="en-US">This also matches.</p>
<p lang="fr">This does not match.</p>
</body>
</html>
Pseudo-classes define the special states of elements for styling.
:hoverThe :hover pseudo-class styles an element when the user moves the mouse over it.
<html>
<head>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="https://example.com/">Hover over this to see the effect.</a>
</body>
</html>
:focusThe :focus pseudo-class styles an element when the user focuses on it.
<html>
<head>
<style>
input:focus {
outline: 3px solid red;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
:first-childThe :first-child pseudo-class styles the element that is the first child of its parent.
<html>
<head>
<style>
p:first-child {
color: brown;
}
</style>
</head>
<body>
<div>
<p>Hello 1</p>
<p>Hello 2</p>
</div>
</body>
</html>
:last-childThe :last-child pseudo-class styles the element that is the last child of its parent.
<html>
<head>
<style>
p:last-child {
color: navy;
}
</style>
</head>
<body>
<div>
<p>Hello 1</p>
<p>Hello 2</p>
</div>
</body>
</html>
:not()The :not() pseudo-class excludes a particular element from the styling context.
<html>
<head>
<style>
p:not(.skip) {
color: navy;
}
</style>
</head>
<body>
<div>
<p>This paragraph is styled.</p>
<p class="skip">This paragraph is excluded.</p>
</div>
</body>
</html>
Pseudo-elements allow you to target and style specific parts of an element, such as inserting content before or after it.
::beforeThe ::before pseudo-element inserts content before an element.
<html>
<head>
<style>
h1::before {
content: "Note: ";
}
</style>
</head>
<body>
<h1>Welcome to IntricateDevo</h1>
</body>
</html>
::afterThe ::after pseudo-element inserts content after an element.
<html>
<head>
<style>
h1::after {
content: " End";
color: orangered;
}
</style>
</head>
<body>
<h1>Welcome to IntricateDevo</h1>
</body>
</html>
::first-lineThe ::first-line pseudo-element styles the first line of text within a block element.
<html>
<head>
<style>
p::first-line {
color: red;
}
</style>
</head>
<body>
<p>Welcome to IntricateDevo.<br>
Learn CSS step by step.</p>
</body>
</html>
::first-letterThe ::first-letter pseudo-element styles the first letter of a word or sentence.
<html>
<head>
<style>
p::first-letter {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<p>Welcome to IntricateDevo</p>
</body>
</html>
::placeholderThe ::placeholder pseudo-element styles the placeholder text of an input field.
<html>
<head>
<style>
input::placeholder {
font-size: 20px;
font-family: sans-serif;
font-weight: 900;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name">
</body>
</html>
CSS selectors help you target the right HTML elements and apply the right styles at the right time.
Knowing these selector groups makes CSS easier to read, write, and maintain.
Which CSS selector is used to target elements by their class name?