CSS Selectors: Understanding Basic to Advanced Selectors

CSS selectors are a crucial part of web development as they define which HTML elements are styled by CSS rules. Selectors range from basic to advanced and learning them allows you to precisely target elements for styling. In this guide, we’ll go through CSS selectors step by step, from the simplest to more complex ones, with examples.

1. Basic Selectors

1.1 Type Selector

The type selector targets HTML elements by their tag name.

Syntax:

element {
  /* CSS properties */
}

Example:

p {
  color: blue;
}

This will change the color of all <p> elements to blue.

1.2 Class Selector

The class selector targets elements by their class attribute. You can reuse a class across multiple elements.

Syntax:

.class-name {
  /* CSS properties */
}

Example:

.red-text {
  color: red;
}

This will change the color of all elements with the class red-text to red.

<p class="red-text">This text will be red.</p>
<span class="red-text">This text will also be red.</span>

1.3 ID Selector

The ID selector targets an element by its unique id attribute. Unlike classes, an ID should only be used once per page.

Syntax:

#id-name {
  /* CSS properties */
}

Example:

#main-header {
  font-size: 24px;
}

This will change the font size of the element with the ID main-header to 24px.

<h1 id="main-header">This is the main header.</h1>

2. Combinators

Combinators allow you to combine selectors and target elements based on their relationships in the HTML structure.

2.1 Descendant Selector

The descendant selector targets an element that is inside another element, regardless of how deep it is nested.

Syntax:

ancestor descendant {
  /* CSS properties */
}

Example:

div p {
  color: green;
}

This will change the color of all <p> elements inside <div> elements to green.

2.2 Child Selector

The child selector targets elements that are direct children of a specified parent element.

Syntax:

parent > child {
  /* CSS properties */
}

Example:

ul > li {
  list-style-type: square;
}

This will change the bullet style of <li> elements that are direct children of <ul> elements.

2.3 Adjacent Sibling Selector

The adjacent sibling selector targets an element that is immediately after a specified element.

Syntax:

element1 + element2 {
  /* CSS properties */
}

Example:

h2 + p {
  margin-top: 0;
}

This will remove the margin above a <p> element that directly follows an <h2> element.

2.4 General Sibling Selector

The general sibling selector targets all elements that are siblings of a specified element.

Syntax:

element1 ~ element2 {
  /* CSS properties */
}

Example:

h2 ~ p {
  color: gray;
}

This will change the color of all <p> elements that are siblings of any <h2> element to gray.

3. Attribute Selectors

Attribute selectors allow you to target elements based on their attributes and attribute values.

3.1 [attribute]

This selects elements that have a specific attribute.

Syntax:

[element] {
  /* CSS properties */
}

Example:

input[type] {
  padding: 10px;
}

This will add padding to all <input> elements that have any type attribute.

3.2 [attribute=”value”]

This selects elements that have a specific attribute with an exact value.

Syntax:

[element="value"] {
  /* CSS properties */
}

Example:

input[type="text"] {
  border: 1px solid black;
}

This will add a border to all <input> elements with the type attribute set to "text".

3.3 [attribute^=”value”]

This selects elements whose attribute value starts with the specified value.

Example:

a[href^="https"] {
  color: green;
}

This will make all links starting with https green.

3.4 [attribute$=”value”]

This selects elements whose attribute value ends with the specified value.

Example:

a[href$=".pdf"] {
  color: red;
}

This will make all links that end in .pdf red.

3.5 [attribute*=”value”]

This selects elements whose attribute value contains the specified value.

Example:

a[href*="example"] {
  font-weight: bold;
}

This will make links that contain the word example in their href bold.

4. Pseudo-Classes

Pseudo-classes target elements based on their state or position in the document.

4.1 :hover

The :hover pseudo-class styles an element when the user hovers over it with a cursor.

Syntax:

element:hover {
  /* CSS properties */
}

Example:

a:hover {
  color: blue;
}

This will change the color of all links when hovered to blue.

4.2 :nth-child()

The :nth-child() pseudo-class selects elements based on their position in a parent’s child list.

Example:

li:nth-child(odd) {
  background-color: lightgray;
}

This will style all odd <li> elements with a light gray background.

4.3 :first-child and :last-child

  • :first-child targets the first child element.
  • :last-child targets the last child element.

Example:

p:first-child {
  font-weight: bold;
}

This will make the first <p> inside a parent bold.

5. Pseudo-Elements

Pseudo-elements allow you to style specific parts of an element.

5.1 ::before and ::after

These pseudo-elements insert content before or after the selected element.

Example:

p::before {
  content: "Note: ";
  font-weight: bold;
}

This will insert the word “Note:” before all <p> elements.

6. Advanced Selectors

6.1 :not()

The :not() selector excludes elements from a selection.

Syntax:

element:not(selector) {
  /* CSS properties */
}

Example:

p:not(.highlight) {
  color: black;
}

This will style all <p> elements that do not have the highlight class with black text.

6.2 Grouping Selectors

You can group multiple selectors together to apply the same styles.

Syntax:

element1, element2 {
  /* CSS properties */
}

Example:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

This will apply the same font to all <h1>, <h2>, and <h3> elements.

Conclusion

CSS selectors range from simple to advanced, and mastering them gives you great control over how you style your HTML elements. By using the right selector, you can ensure that your website’s styles are applied efficiently and precisely.