WikiGalaxy
CSS Selectors Overview
Basic Selectors:
CSS selectors are patterns used to select the elements you want to style. The most common selectors are the type, class, and ID selectors.
Type Selector:
Selects all elements of a given type. For example, p selects all paragraph elements.
Class Selector:
Selects all elements with a specific class attribute. Use a period (.) followed by the class name, e.g., .example.
ID Selector:
Selects a single element with a specific ID. Use a hash (#) followed by the ID name, e.g., #unique.
/* Type Selector */
p {
color: blue;
}
/* Class Selector */
.example {
font-weight: bold;
}
/* ID Selector */
#unique {
background-color: yellow;
}
Descendant Selector:
Selects all elements that are descendants of a specified element. For example, div p selects all p elements inside div elements.
Child Selector:
Selects all elements that are direct children of a specified element. For example, ul > li selects all li elements that are direct children of a ul.
/* Descendant Selector */
div p {
margin-bottom: 10px;
}
/* Child Selector */
ul > li {
list-style-type: none;
}
Advanced CSS Selectors
Attribute Selector:
Selects elements based on an attribute or attribute value. For example, [type="text"] selects all input elements with a type attribute of "text".
Pseudo-class Selector:
Selects elements based on their state. Common pseudo-classes include :hover, :focus, and :nth-child().
Pseudo-element Selector:
Selects and styles a part of an element. Examples include ::before, ::after, and ::first-line.
/* Attribute Selector */
input[type="text"] {
border: 1px solid #ccc;
}
/* Pseudo-class Selector */
a:hover {
color: red;
}
/* Pseudo-element Selector */
p::first-line {
font-weight: bold;
}
Universal Selector:
Selects all elements in a document. It is represented by an asterisk (*).
Grouping Selector:
Groups multiple selectors to apply the same styles to different elements. For example, h1, h2, h3 applies the same styles to all three heading levels.
/* Universal Selector */
* {
box-sizing: border-box;
}
/* Grouping Selector */
h1, h2, h3 {
color: navy;
}
Combinator Selectors
Adjacent Sibling Selector:
Selects an element that is immediately preceded by a specified element. For example, h1 + p selects the first p element that follows an h1.
General Sibling Selector:
Selects all elements that are siblings of a specified element. For example, h1 ~ p selects all p elements that are siblings of an h1.
/* Adjacent Sibling Selector */
h1 + p {
margin-top: 0;
}
/* General Sibling Selector */
h1 ~ p {
color: gray;
}
Attribute Substring Selectors:
These selectors match elements based on substrings within attribute values. Examples include [attr^="value"] for prefix, [attr$="value"] for suffix, and [attr*="value"] for substring.
/* Attribute Substring Selectors */
a[href^="https"] {
color: green;
}
a[href$=".pdf"] {
text-decoration: underline;
}
a[href*="example"] {
font-style: italic;
}
Structural Pseudo-classes
:nth-child(n):
Selects elements based on their position in a group of siblings. For example, :nth-child(2) selects the second child.
:nth-of-type(n):
Similar to :nth-child, but only considers siblings of the same type.
/* :nth-child Selector */
li:nth-child(odd) {
background-color: #f9f9f9;
}
/* :nth-of-type Selector */
p:nth-of-type(2) {
font-size: larger;
}
:first-child and :last-child:
Selects the first or last child element among a group of siblings.
/* :first-child Selector */
p:first-child {
margin-top: 0;
}
/* :last-child Selector */
p:last-child {
margin-bottom: 0;
}
Form Control Selectors
:checked:
Selects every checked <input> element (checkboxes or radio buttons).
:disabled:
Selects every disabled <input> element.
/* :checked Selector */
input:checked {
border-color: blue;
}
/* :disabled Selector */
input:disabled {
background-color: #ddd;
}
:enabled and :focus:
The :enabled selector selects every enabled <input> element, while the :focus selector selects the element that has focus.
/* :enabled Selector */
input:enabled {
border: 1px solid green;
}
/* :focus Selector */
input:focus {
outline: 2px solid orange;
}
Negation and Target Selectors
:not(selector):
Selects every element that is not a specified element. For example, :not(.excluded) selects all elements that do not have the class "excluded".
:target:
Selects the target element of a URL containing a fragment identifier.
/* :not Selector */
div:not(.excluded) {
background-color: lightblue;
}
/* :target Selector */
#section:target {
border: 2px solid red;
}
:empty:
Selects every element that has no children (including text nodes).
/* :empty Selector */
div:empty {
display: none;
}
UI Element States
:hover:
Applies a style when the user hovers over an element.
:active:
Applies a style when an element is activated, such as when a button is pressed.
/* :hover Selector */
button:hover {
background-color: #555;
}
/* :active Selector */
button:active {
background-color: #333;
}
:visited and :link:
The :visited selector styles links that have been visited, while :link styles links that have not yet been visited.
/* :visited Selector */
a:visited {
color: purple;
}
/* :link Selector */
a:link {
color: blue;
}
CSS Specificity and Inheritance
Specificity:
Specificity determines which CSS rule is applied by the browser when multiple rules could apply to the same element. It is calculated based on the types of selectors used.
Inheritance:
Some CSS properties are inherited from parent to child elements, meaning the child elements will take on the parent's property value unless overridden.
/* Example of Specificity */
#header .nav li.active {
color: white; /* More specific than .nav li.active */
}
/* Example of Inheritance */
body {
font-family: Arial, sans-serif; /* This property is inherited by child elements */
}
!important Rule:
The !important rule in CSS is used to add more importance to a property/value than normal. It overrides any other declarations, even if they have higher specificity.
/* !important Rule */ p { color: red !important; /* This will override any other color declarations for
elements */ }
