CSS selectors are patterns used to target and style specific HTML elements. They allow you to apply styles to elements based on various conditions, such as element type, class, ID, attributes, and more. Understanding selectors is essential for effectively styling web pages.
Basic Selectors
Basic selectors target elements based on their name, class, ID, or other straightforward characteristics.
1.1 Element (Type) Selector
Selects elements by their tag name.
/* Selects all <p> elements */
p {
color: blue;
}1.2 Class Selector
Selects elements based on their class attribute. Classes are defined with a dot (.) followed by the class name.
/* Selects all elements with the class "highlight" */
.highlight {
background-color: yellow;
}1.3 ID Selector
Selects an element based on its unique ID attribute. IDs are defined with a hash (#) followed by the ID name.
/* Selects the element with the ID "header" */
#header {
font-size: 24px;
}Note: IDs should be unique within a page, while classes can be reused across multiple elements.
1.4 Universal Selector
Selects all elements on the page.
/* Applies margin and padding reset to all elements */
* {
margin: 0;
padding: 0;
}Grouping Selectors
Grouping selectors allows you to apply the same styles to multiple elements at once, reducing redundancy in your CSS code.
/* Applies the same style to all <h1> and <h2> elements */
h1, h2 {
color: darkgreen;
font-family: Arial, sans-serif;
}Attribute Selectors
Attribute selectors target elements based on the presence or value of specific attributes.
3.1 Basic Attribute Selector
Selects elements with a specified attribute.
/* Selects all <input> elements with a "type" attribute */
input[type] {
border: 1px solid #ccc;
}3.2 Attribute Value Selector
Selects elements with an attribute of a specific value.
/* Selects all <input> elements where type="text" */
input[type="text"] {
border: 2px solid blue;
}3.3 Partial Attribute Selectors
[attribute^="value"]: Selects elements where the attribute value starts with a specific value.
/* Selects all <a> elements where href starts with "https" */
a[href^="https"] {
color: green;
}[attribute$="value"]: Selects elements where the attribute value ends with a specific value.
/* Selects all <img> elements where src ends with ".jpg" */
img[src$=".jpg"] {
border: 2px solid red;
}[attribute*="value"]: Selects elements where the attribute value contains a specific substring.
/* Selects all elements with a class name containing "btn" */
[class*="btn"] {
padding: 10px;
}Pseudo-classes and Pseudo-elements
4.1 Pseudo-classes
Pseudo-classes target elements based on their state or position within the document.
:hover: Targets an element when the user hovers over it.
/* Changes link color on hover */
a:hover {
color: red;
}:first-child: Selects the first child of its parent.
/* Styles only the first paragraph within a container */
.container p:first-child {
font-weight: bold;
}:nth-child(n): Selects elements based on their position within a parent element.
/* Styles every second list item */
li:nth-child(2n) {
background-color: #f0f0f0;
}4.2 Pseudo-elements
Pseudo-elements select a part of an element and apply styles to it.
::before: Inserts content before the element’s actual content.
/* Adds a bullet icon before list items */
li::before {
content: "• ";
color: red;
}::after: Inserts content after the element’s content.
/* Adds a decorative line after headings */
h2::after {
content: "";
display: block;
width: 50%;
height: 2px;
background-color: black;
}::first-letter: Styles the first letter of an element.
/* Makes the first letter of paragraphs larger and bold */
p::first-letter {
font-size: 2em;
font-weight: bold;
}Specificity and Inheritance
5.1 Specificity
Specificity determines which styles are applied to an element when there are conflicting rules. It is calculated based on the types of selectors used:
- Inline styles: Highest specificity (e.g.,
style="color: red;"). - ID selectors: High specificity (
#header). - Class, attribute, and pseudo-class selectors: Medium specificity (
.highlight,[type="text"],:hover). - Element selectors: Lowest specificity (
h1,p).
Example of Conflicting Styles:
/* Lower specificity */
p {
color: blue;
}
/* Higher specificity due to class selector */
.highlight {
color: green;
}
/* Highest specificity due to ID selector */
#special {
color: red;
}If a paragraph has the class highlight and the ID special, it will be styled with the color red due to the ID selector’s higher specificity.
5.2 Inheritance
Some CSS properties, such as color and font-size, are inherited from a parent element to its children by default.
/* Set the font color for the body */
body {
color: navy;
}
/* All child elements (e.g., <p>, <h1>) will inherit the color */Overriding Inherited Styles:
You can override inherited styles using more specific selectors or applying inherit or initial values.
/* Override inherited color */
h1 {
color: black;
}Summary
CSS selectors are powerful tools for targeting HTML elements and applying styles. Basic selectors (element, class, ID) are the foundation of styling, while grouping selectors help reduce redundancy. Attribute selectors provide flexibility in styling elements based on their attributes. Pseudo-classes and pseudo-elements allow for styling elements in specific states or targeting parts of elements. Understanding specificity is crucial for resolving conflicts between different styles, and knowledge of inheritance helps maintain consistent styling throughout your webpage. Mastering these selectors enables you to create dynamic, responsive, and well-organized stylesheets.
