Making Advanced CSS Selections

CSS has a lot more flexibility than we've previously gone over. In fact, we can get incredibly specific with the selections we make in order to target very specific sets of elements. Perhaps we want to select ever other row in a table. Or, maybe we want to select all paragraph elements inside of another specific element. All of this and more is possible, and we're going over all the details right here.

Selections of Elements With Multiple Classes

Have we mentioned that you can apply multiple classes to elements inside HTML? Classes are, by their nature, repeatable and non-singular, unlike IDs. Any element can have only one ID, however can have as many CSS classes as needed. To do this, we simply add a space between classes. Take a look at this example:

<div class="white-text black-background"></div>

The above div has the classes of both "white-text" and "black-background". As such, the browser will try to apply all relevant styles to the element. In the case that both classes declare the same property, whichever one is written further down the document will be applied.

Ok, so that's fine and dandy, but how do we target these elements in CSS?

Let's pretend that we want to create a CSS rule that applies only to elements that have BOTH the .red-text and .black-background classes. In that case, we would do the following:

.red-text.black-background {
  display: none;
}

So while in HTML, we add a space between classes, in CSS, we write them directly after each other. This also applies to IDs; In the case that we want to apply a rule to any element that has the ID of "first-paragraph" and a class of "red-text", we'd do the following:

#first-paragraph.red-text {
  color: blue;
}

Make sense? This is the rule to select elements with any multiple classes or class/ID combinations. Remember: In order for a rule to apply, the element has to match ALL of the conditions you set for it in the selector.

Selecting Elements Inside Other Elements

Okay! So let's talk about selections of elements inside other elements. Say that we want to apply a CSS rule to every paragraph with the "red-text" class, BUT only the ones that are inside of a "red-text-container" class element. Well, that's just as simple. Instead of writing the selectors directly next to each other, simply add a space between them:

.red-text-container .red-text {
  color: red;
}

So in the above example, if we had an element with the "red-text" class that was not inside of the "red-text-container" class parent element, the rule would not be applied. The HTML below should help you understand that a little better:

<p class="red-text">This text would not be red.</p>

<div class="red-text-container">
  <p class="red-text">This text would be red!</p>
</div>

When it comes to CSS, I always recommend having a good balance between specificity and broad selection. For example, we often use what's called a "utility class" which is a term for a class that can be used site wide to apply a style that might need to be applied multiple times. "red-text" would be an example of a utility class, as we could use that across a site to make text red.

On the other hand, if we're targeting a specific element inside another element, we want to be more specific, just in case we accidentally apply a rule to an element that we don't want it applied to.

Selecting Direct Children Elements

With the above information, we can select classes inside other classes. But what if we want to only select an element that is a direct child of another?

In this case, we use the > (greater than) symbol. Take the following code:

<p class="red-text">This text would not be red.</p>

<div class="red-text-container">
  <p class="red-text">This text would be red!</p>

  <div class="inner-content">
    <p class="red-text">This text would not be red.</p>
  </div>
</div>
.red-text-container > .red-text { color: red; }

Take a look at the HTML and CSS below. In this example, the ".red-text" element inside the ".inner-content" element would NOT be red, because it is not a direct child of the ".red-text-container" element.

One fun fact is that we can chain these selectors together to be SUPER specific. So I could create a CSS rule to select the direct child of another element with a specific ID, that is inside of another element with a specific class, etc. etc. Theoretically, you can chain as many selections as you want to get to an element, but try not to go overboard!

Selections by Attribute

Remember HTML attributes? Like the <a> element: it has the "href" attribute to tell the browser where the link leads. Well, we can use CSS to target elements with specific attributes too!

In this case, we use square brackets [ and ] directly after the main part of the selector. Inside the square brackets, simply put the attribute exactly as it appears in the html. Here's an example:

a[href="https://mythicdesigncompany.com"] {
  color: gold;
}

This CSS rule will apply a gold color to any links to the Mythic Design Company home page. Pretty cool right? We can use this for any attribute on a page, whether that be a data attribute, or something without a value like "disabled"

We have a lot more possibilities in terms of selections, and those involve what we call "psuedo elements" which we'll be talking about soon!

Previous Lesson Next Lesson

Sign Up For Our Newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

homebubblebriefcasepilcrow linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram