Selectors and Specificity
## Learning Objectives
- Master CSS selector syntax
- Understand specificity calculations
- Use pseudo-classes and pseudo-elements
- Combine selectors effectively
## Basic Selectors
### Universal Selector
```css
* {
margin: 0;
padding: 0;
}
```
### Element Selector
```css
p {
color: #333;
}
h1, h2, h3 {
font-family: Arial, sans-serif;
}
```
### Class Selector
```css
.highlight {
background-color: yellow;
}
.button {
padding: 10px 20px;
}
```
### ID Selector
```css
#header {
background-color: #333;
color: white;
}
```
### Attribute Selector
```css
/* Has attribute */
[disabled] {
opacity: 0.5;
}
/* Exact match */
[type="submit"] {
background-color: blue;
}
/* Contains */
[class*="icon"] {
/* Matches icon, icon-btn, icon-large */
}
/* Starts with */
[class^="icon"] {
/* Matches icon-btn but not btn-icon */
}
/* Ends with */
[class$="-icon"] {
/* Matches btn-icon but not icon-btn */
}
```
## Combinators
### Descendant Selector
```css
article p {
line-height: 1.6;
}
```
### Direct Child Selector
```css
nav > ul {
list-style: none;
}
```
### Adjacent Sibling
```css
h1 + p {
font-size: 1.2em;
}
```
### General Sibling
```css
h2 ~ p {
color: #666;
}
```
## Pseudo-Classes
### Link States
```css
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: orange;
}
```
### Focus State
```css
input:focus {
border-color: blue;
outline: none;
}
```
### Structural Pseudo-Classes
```css
/* First child */
li:first-child {
font-weight: bold;
}
/* Last child */
li:last-child {
border-bottom: none;
}
/* Nth child */
li:nth-child(odd) {
background: #f0f0f0;
}
li:nth-child(3) {
color: red;
}
/* First of type */
p:first-of-type {
font-size: 1.2em;
}
/* Last of type */
p:last-of-type {
margin-bottom: 0;
}
```
### Form Pseudo-Classes
```css
input:disabled {
background-color: #eee;
}
input:enabled {
background-color: white;
}
input:checked + label {
font-weight: bold;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
```
### Not Selector
```css
p:not(.highlight) {
color: #333;
}
input:not([type="submit"]) {
width: 100%;
}
```
## Pseudo-Elements
### First Line and Letter
```css
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 2em;
float: left;
}
```
### Before and After
```css
.button::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background: url("icon.png");
}
.card::after {
content: " - Special Offer";
color: red;
}
```
### Selection
```css
::selection {
background-color: yellow;
color: black;
}
```
### Placeholder
```css
input::placeholder {
color: #999;
font-style: italic;
}
```
## Specificity Calculation
Specificity determines which rule wins when multiple rules apply.
### Specificity Levels
1. Inline styles: 1000
2. ID selectors: 100
3. Class, attribute, pseudo-class: 10
4. Element, pseudo-element: 1
### Examples
```css
/* 1 (element) */
p {
color: red;
}
/* 10 (class) */
.highlight {
color: yellow;
}
/* 11 (element + class) */
p.highlight {
color: yellow;
}
/* 100 (ID) */
#header {
color: blue;
}
/* 110 (ID + class) */
#header.title {
color: blue;
}
/* 1000 (inline) */
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →