Custom CSS – changing area’s seperately

Okay so with CSS specificity is king. For example, If you want CSS to only apply to a widget title, you need to make sure the selector you’re using is as specific (read: unique) as possible. An example of this is the post title. The following CSS was written with Vantage in mind. It may not work for your theme.

I open up my website and click the widget title. This is what I see in the inspector.

If I use the h3 selector it will affect every h3. If I user the .widget-title selector, it will affect anything with that class. If I use the #secondary .widget .widget-title selector it will affect anything inside of the secondary container and anything in the widget container and then finally an element with the widget-title class attached. This obviously could still mean that it may affect other widget titles that covered by this selector. So we need to be more specific. In my example, I’m going to use the :first-child pseudo class. This will allow me specifically target the first element that meets the selector criteria. As a reminder, CSS is read from right to left. it would look something like this:

#secondary .widget:first-child .widget-title {  color: #fff;}

If I wanted to target the last occurrence, I would use :last-child. Anything in between is slightly trickier as you’ll have to use :nth-child. Take for example I have four widgets in my sidebar, all of which have a widget title. I’ll need to use the following CSS if I wish for it to only apply to the third element.

#secondary .widget:nth-child(3) .widget-title {  color: #fff;}

That’s only a very basic explanation and use case for :nth-child. It can become complicated. It can become very complicated so I would highly recommend reading the linked MDN. Hopefully this helps.

For more information on this, I would recommend giving the following MDN doc a read, Specificity.