Once I got the hang of styling web documents I began to form tons of habits, some were bad and some were good.One thing that I completely overlooked was the ability to use extra selector types.

Aside from the basic element, id, and class selectors you have tons of options when styling documents with CSS. I’m going to show you some of the one’s I tend to use regularly. I will also cover their compatibility with modern and legacy browsers.

The asterisk, wildcard, star selector (*)

I have seen a lot of interesting conversation regarding the asterisk (which I call the wildcard). As derived from regular expressions this selector grabs all elements. In the second example we are selecting any elements within the element with an id of content. The controversy surrounding the wildcard is that it is a performance killer and is rather slow. This may not be the best selector for enterprise projects.

* {
     color: red;
}
#content *{
     color: red;
}

The *, wildcard, star, asterisk selector is supported in all major browsers.

The Child Combinator Selector (>)

I just flat out didn’t know what the child combinator selector did for a while so I just didn’t bother to use it. Actually, it is extremely helpful when styling navigational elements. When you would like your drop down links to be styled separate from the original links you can use the selector to select only elements that are contained within a certain element.

In the following example only the li directly within the sub-menu element will be styled.

.sub-menu > li {
     color: red;
}

The child combinator selector is supported in all major browsers.You must declare the HTML5 doctype in order to ensure compatibility with iE8 and below

The Adjacent Selector (+)

You may have wanted to select an element that is next to a particular piece or element. If that’s the case you are looking for the adjacent selector. This selector will style the element that follows the element preceeding the + symbol. This technique is excellent when working on hidden content functions that you would like to have slide out or pop up on hover.

In the following example only div’s that are adjacent(directly after but not within the element with the class of overlay will be styled

.overlay + div {
     background: #444;
}

The adjacent selector is supported in all major browsers.You must declare the HTML5 doctype in order to ensure compatibility with iE8 and below

Attribute Selectors ([attribute])

You may have found yourself in a pickle trying to style a submit button outside of the input element. Of course, the form has a ton of inputs and when you go to style that input all of your text and checkbox inputs start to look like submit buttons. One simple way to avoid this is to use the attribute selector. You can select any HTML element by it’s attributes.

Below I will select just a submit button from the html code

input[type=submit] {
     color: #fff;
}

One of the most glorious things is the fact that you can use regular expression syntax in these attribute selectors to find things. The first example will find links that’s href attribute begins with https, the second example is going to retrieve all href attributes that end with .mov.

a[href^="https"]{
    color: orange;
}
a[href$=".mov"]{
    background: #e8e8e8;
}

The [attribute] selector is supported in all major browsers. * Don’t forget your html5 doctype

The Before and After Psuedo Element (:before, :after)

It seems like a mouthful but actually this psuedo element selector selects directly after an element (:after) and directly before(:before). This technique is very common for using drop shadows after div’s or images. The first example will put a drop shadow at the very top of the page before the body starts, the second will place a shadow directly after an image

body:before {
    box-shadow: 2px 3px 6px #444;
}
img:after{
    box-shadow: 2px 3px 6px #444;
}

:before and :after are actually from the CSS1 spec and are available in all major browsers

I hope that gives you a couple of things to try with CSS. Start increasing your skills today!