Common CSS Selectors To Know And How To Use Them

668

Selecting the HTML elements you want to style is simple enough when you use classes and ids. But those two aren’t the only CSS selectors available for you to use when identifying which element(s) you want to style.

This post will take a look at other CSS selectors you can use to make styling with CSS efficient.

The best thing is you don’t need to assign custom names, as you would when working with classes or ids, for any of them.

What are CSS selectors?

CSS selectors make up the first part of a CSS rule that points to the HTML element you want to style.

So far, we have looked at using elements as selectors (e.g. p, div, a) in addition to assigned classes and ids.

Read: How To Use Classes & IDs To Select Elements In CSS

We saw that using elements applies the specified styles across every matching element while using classes allows for more control in that we can exclude elements by not setting the styled class to them.

Note: ids should be unique and therefore apply only to individual elements.

But adding classes across 10, 15, or more elements can get cumbersome and there simply is no need for it. You can use the following CSS selectors to make multiple style applications across elements faster and easier.

This is by no means an all-inclusive list of CSS selectors – there are a lot but there’s no need to memorize. Just familiarize yourself with them so you know other CSS selectors are available for different use cases.

CSS Descendant Selector

A <div> with nested <p>s is an example of a parent-child relationship, with the <div> being the parent and the <p>s the children.

If you want to select all children <p>s within a parent <div> but none of the outside <p>s, you can use a descendant selector.

div p {}

div p {
    font-size: 200%;
}

CSS Sibling Selector

Now what happens if we have multiple <div>s with <p>s inside but we want to only style <p>s that are in <div>s with an <h3> child element?

To apply this selective behavior, we can’t simply use the CSS descendant selector because it will not take into consideration the <h3> condition, applying the styles to all <div>s with nested <p>s.

If you want to choose all <p>s in <div>s that have an <h3>, you would use a sibling selector.

h3 ~ p {}

h3~p {
    font-size: 200%;
}

More CSS Selectors For Specific Selections

To select:

• a tag directly following another tag

Ex: <p> following an <h3>, do h3 + p {}

h3+p {
   font-size: 200%;
}

CSS combinators explain the relationship between different elements and, also, provide a way to exert more control over our targets.

Use the HTML markup below for the following examples.

   <div>
    <p>I'm the first paragraph inside this div.</p>
    <p>I'm the second paragraph inside this div.</p>
    <a href="www.thtrocks.com">THT Rocks Link</a>
  </div>

  <div>    <p>I'm the first paragraph inside this div.</p>
    <p>I'm the second paragraph inside this div.</p>
    <p>And I'm the third paragraph inside this div.  </p>
    <a href="www.cssselectors.com"  target="_blank">CSS Selectors Link</a>
  </div>

  <div>
    <p>I'm the first paragraph inside this div.</p>
    <p>I'm the second paragraph inside this div.</p>
    <a href="https://thehelpfultipper.com/" target="_blank">Go to THT Link</a>
  </div>

  <h3>There's no div here, rule still applies.</h3>
  <p>I'm a paragraph with no parent!</p>
  <p>OUT OF THE DIV BABEEE.</p>

• all instances of an element with a specific attribute

Ex: a[target] {}

a[target] {
     font-size: 200%;
}

We’re selecting all links that have a target attribute despite what classes or ids they’re assigned – neat, huh?

• all instances of an element that contain a particular attribute-value pair

Ex: a[href=’url’] {}

a[href="www.cssselectors.com"] {     font-size: 200%;
}

Likewise, you could be searching here for all links containing a “target=_blank”. For a refresh on HTML elements, attributes, and properties click here.

• only instances with an attribute that contains something specific in its value

Ex: a[href *=”google.com”] {}

a[href*="www"] {
     font-size: 200%;
}

Above we are selecting all links that contain “www”. This applies to those with “https://www.something.com” as well as “www.something.com”. It’s not only links starting with “www” – you need ^= for that case, see the below chart.

Operator	What it means…
^=	begins with
$=	ends with
~=	has value between two spaces
!=	has value separated by hyphens

CSS selectors can make working with CSS and styling web pages faster and easier. Master them and avoid the trap of managing classes and ids endlessly.