Advance CSS Selectors

| Comments

CSS is awesome cause it gives the visual appearance to your website, I can’t think of website without css.

Often we use simple id or class for an element to target styling. Sometimes there are scenarios where class names are dynamically generated, in those cases we will relay on JS to insert modifier classes just to bring some unique styles thats isn’t cool, The good thing is there are some useful selectors in css which can take care of it and save some lines of your JS-Just-Used-For-Styling.

In this post we will be looking at some advance css selectors to help with typical use cases.

Partial Selectors

Partial selectors useful if you want to target styles if you are aware of part of your classname

Here is a list of things we will be looking at

  • $= ends with
  • ^= begins with
  • *= contains

Ends With ($=)

Selecting an element with CSS that has a repetitive suffix would look like this:

1
2
3
div[id$=_myDiv] {
// cool CSS stuffs
}

The first thing to note is the div with the brackets surrounding the id$ attribute. The div tag can be any element in the DOM from input to span and so on. This is awesome if you’re trying to target a specific element that has a dynamic prefix like this:

1
2
3
<div id="0125_LoginPanel">
Some sample content
</div>

So to target this div just use the selector like before and write:

1
2
3
div[id$="_LoginPanel"] {
  padding: 1em;
}

You can do it for any element (div, span, img, etc…), and any common attribute (id, name, value, etc…).

Begins with (^=)

Much like the “ends with” section above you can target elements with specific prefixes. The only difference than before is what character you add to the selector following the = sign.

1
2
3
<div class="myPanel_1435">
  <h1>My custom panel</h1>
</div>

Then the selector would look like this:

1
2
3
div[class^="myPanel_"] {
  // cool CSS stuffs
}

Simple enough right? All we did that’s different than the ends with ($=) selector is target the prefix by adding a ^ symbol in front of the = sign. You may also notice this time I used a class instead of an id. CSS is flexible enough to pretty much let you target anything as I stated earlier.

Contains (*=)

What if your have both a dynamic prefix and suffix? Well, luckily you can target an element that simply contains a parameter.

1
2
3
4
<div class="1gdug_logoutPanel_4828fde">
  <h1>My Custom Logout Panel</h1>
  <form>...</form>
</div>

Targeting this could look like:

1
2
3
div[class*="logoutPanel"] {
  // cool CSS stuffs
}

So essentially any div that contains the text logoutPanel can be selected like the example above.

Pseudo-class selectors

Simply put, pseudo-class selectors are CSS selectors with a colon preceding them. Many of these are commonly used for links or interactive types of elements.

1
2
3
4
5
6
7
a:hover {}
a:active {}
a:focus {}
a:visited {}
:checked {}
:first-child {}
:last-child {}

I’m not going to cover these things, as you might be already aware. Like it’s mentioned on the post title we will look at some advance Pseudo-class.

:not(x)

Instead of putting on the border…

1
2
3
4
/* add border */
.nav li {
  border-right: 1px solid #666;
}

…and then taking it off the last element…

1
2
3
4
/* remove border */
.nav li:last-child {
  border-right: none;
}

use the :not() pseudo-class to only apply to the elements you want:

1
2
3
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Sure, you can use .nav li + li or even .nav li:first-child ~ li, but with :not() the intent is very clear and the CSS selector defines the border the way a human would describe it.

::first-letter

Drop caps are pretty slick when it comes to reading and authoring content for the web. These were made famous with print and have now become a nice trend in the blogging world. With pseudo class selectors you can target the first letter of a paragraph or element by simply writing:

1
2
3
p::first-letter {
 // drop cap styles
}

You probably don’t want to target every paragraph so to work around this you can actually chain together pseudo selectors

1
2
3
p:first-child::first-letter {
 // drop cap styles for only the first paragraph of text.
}

This is so useful and saves you from having to use JavaScript or something more hacky to style up your content nicely.

:first-of-type

:first-of-type is one I use all the time which allows you to select the first of any type within the current parent element and target it via CSS.

1
2
3
article:first-of-type {
  margin-top: 0;
}

:last-of-type

You can’t have :first-of-type without :last-of-type. This selector works the opposite way of :first-of-type if you hadn’t already guessed.

1
2
3
4
article:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

PS. Do share your favorite advance selectors in the comments section

Comments