WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

CSS Selectors

~1 min read · CSS
On this page
❮ Previous Next ❯

CSS selectors are patterns used to select and apply styles to HTML elements. They define which elements the style rules will affect. Selectors can be simple (like targeting an element directly) or more complex (targeting based on attributes, classes, or relationships between elements).

Basic Types of Selectors:

  1. Element Selector
  2. Class Selector
  3. ID Selector
  4. Universal Selector
  5. Attribute Selector

Element Selector:

Targets all instances of a specified HTML element.

Example
p {
color: blue;
font-size: 40px;
}
Try it yourself

Class Selector:

Targets elements with a specific class attribute. It is prefixed with a dot (.).

Example
.container {
padding: 20px; /* Targets elements with the class "container" */
}
Try it yourself

ID Selector: 

Targets an element with a specific id attribute. It is prefixed with a hash (#).

Example
#header {
background-color: gray; /* Targets the element with id="header" */
}
Try it yourself

Universal Selector:

Targets all elements on the page. It is denoted by an asterisk (*).

Example
* {
text-align: center;
color: red;
}
Try it yourself

Attribute Selector:

Targets elements based on their attributes.

Example
input[type="text"] {
border: 3px solid red; /* Targets <input> elements with type="text" */
}
Try it yourself

Combinators (Relationship Between Elements):

  1. Descendant Selector
  2. Child Selector (>)
  3. Adjacent Sibling Selector (+)
  4. General Sibling Selector (~)
  5. Pseudo-Class Selector
  6. Pseudo-Element Selector
  7. Grouping Selector

Descendant Selector:

Targets elements that are descendants (children, grandchildren, etc.) of a specific parent element.

Example
div p {
color: red; /* Targets <p> elements inside <div> elements */
}
Try it yourself

Child Selector (>):

Targets elements that are direct children of a specified element.

Example
div > p {
color: green; /* Targets <p> elements that are direct children of <div> */
}
Try it yourself

Adjacent Sibling Selector (+):

Targets an element that is immediately adjacent to a specified element.

Example
h1 + p {
font-size: 30px; /* Targets the <p> element directly after an <h1> */
}
Try it yourself

General Sibling Selector (~): 

Targets all siblings of a specified element.

Example
h1 ~ p {
color: blue; /* Targets all <p> elements that are siblings of <h1> */
}
Try it yourself

Pseudo-Class Selector:

Targets elements based on their state or position (like hover, first-child, etc.).

Example
a:hover {
color: red; /* Changes the color of <a> elements when hovered */
}

p:first-child {
font-weight: bold; /* Targets the first <p> child in a container */
}
Try it yourself

Pseudo-Element Selector: 

Targets and styles specific parts of an element, like the first letter or first line.

Example
p::first-letter {
font-size: 2em; /* Enlarges the first letter of each <p> */
}

p::before {
content: "Note: "; /* Inserts text before each <p> element */
}
Try it yourself

Grouping Selector:

Apply the same style to multiple elements by separating them with a comma.

Example
h1, h2, h3 {
color: navy; /* Targets all <h1>, <h2>, and <h3> elements */
}
Try it yourself

❮ Previous Next ❯