askvity

How Do I Target an Element Inside a Class in CSS?

Published in CSS Selectors 4 mins read

Targeting elements in CSS based on classes is a fundamental skill. When you ask how to "target an element inside a class," it usually means targeting an element that is a descendant or child of another element that has a specific class assigned to it. However, the phrase can also sometimes refer to selecting a specific type of element that itself has a given class. We'll cover both scenarios.

The most common interpretation is targeting a descendant element, but CSS also allows you to select specific element types that possess a particular class directly.

Targeting a Specific Element Type With a Class

If your goal is to select a particular type of HTML element only when it also has a specific class assigned to it, you combine the element selector with the class selector.

According to CSS principles:

  • To select only one type of elements with a specific class, write the element name, then a period (.) character, followed by the class attribute value.

Example 1: Targeting a <span> element that has the class highlight

span.highlight {
  color: yellow;
  background-color: black;
}

In this example, only <span> elements with the class highlight will have their text color set to yellow and background black. An element like <p class="highlight"> would not be affected by this rule, nor would a <span> without the highlight class.

Targeting Elements Inside an Element With a Class

This is the more frequent meaning of "targeting an element inside a class." You want to style an element (like an <a>, <p>, or <img>) that is contained within another element (like a <div>, <nav>, or <aside>) which has a specific class.

You achieve this using combinators. The most common are the descendant selector (space) and the child selector (>).

  • Descendant Selector (Space): Selects all elements that are descendants (children, grandchildren, etc.) of the first element.
  • Child Selector (>): Selects only direct children of the first element.

Syntax:

.classname descendant-element {
  /* styles */
}

.classname > child-element {
  /* styles */
}

Examples:

Let's say you have the following HTML structure:

<div class="sidebar">
  <h2>Navigation</h2>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li>
      Link 2
      <ul>
        <li><a href="#">Sub-link A</a></li>
      </ul>
    </li>
  </ul>
  <p>Some text.</p>
</div>

Here's how you could target elements inside the .sidebar element:

  • Targeting ALL <a> elements within .sidebar (descendants):

    .sidebar a {
  color: blue; /* Styles all <a> tags inside .sidebar */
}

    This would style both "Link 1" and "Sub-link A".

  • Targeting only direct <li> children of the <ul> within .sidebar:

    .sidebar ul > li {
  border-bottom: 1px solid #ccc; /* Styles list items directly under ul in sidebar */
}

    This would style the <li> containing "Link 1" and the <li> containing "Link 2", but not the <li> containing "Sub-link A" because it's not a direct child of the first <ul>.

  • Targeting the <h2> element directly inside .sidebar:

    .sidebar > h2 {
    margin-top: 0; /* Styles the h2 if it's a direct child of sidebar */
}

  • Targeting <ul> elements that are descendants of .sidebar:

    .sidebar ul {
    list-style: none; /* Removes default list bullets for all ul tags inside sidebar */
}

Comparison Table

Selector Syntax Description Applies To
Type with Class element.class Selects a specific element type only if it has the .class. The element itself
Descendant .class element Selects any element that is anywhere inside the element with .class. Children, grandchildren, great-grandchildren, etc.
Direct Child .class > element Selects an element only if it is a direct child of the element with .class. Only immediate children

Understanding these selectors allows you to precisely target elements within specific structural contexts defined by classes, creating well-organized and maintainable CSS.

Related Articles