CODE > WEB DEVELOPMENT
The 30 CSS Selectors You Must Memorize
So you learned the base id , class , and descendant selectors—and then called it a
day? If so, you're missing out on an enormous level of ᴀexibility. While many of the
selectors mentioned in this article are part of the CSS3 spec, and are, consequently,
only available in modern browsers, you owe it to yourself to commit these to memory.
1. *
1 * {
2 margin: 0;
3 padding: 0;
4 }
Let's knock the obvious ones out, for the beginners, before we move onto the more
advanced selectors.
The star symbol will target every single element on the page. Many developers will use
this trick to zero out the margin s and padding . While this is certainly ᐀�ne for quick
tests, I'd advise you to never use this in production code. It adds too much weight on
the browser, and is unnecessary.
The * can also be used with child selectors.
1 #container * {
2 border: 1px solid black;
3 }
This will target every single element that is a child of the #container div . Again, try
not to use this technique very much, if ever.
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
2. #X
1 #container {
2 width: 960px;
3 margin: auto;
4 }
Pre᐀�xing the hash symbol to a selector allows us to target by id . This is easily the
most common usage, however be cautious when using id selectors.
Ask yourself: do I absolutely need to apply an id to this element
in order to target it?
id selectors are rigid and don't allow for reuse. If possible, ᐀�rst try to use a tag name,
one of the new HTML5 elements, or even a pseudo-class.
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
3. .X
1 .error {
2 color: red;
3 }
This is a class selector. The difference between id s and class es is that, with the
latter, you can target multiple elements. Use class es when you want your styling to
apply to a group of elements. Alternatively, use id s to ᐀�nd a needle-in-a-haystack, and
style only that speci᐀�c element.
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
4. X Y
1 li a {
2 text‐decoration: none;
3 }
The next most comment selector is the descendant selector. When you need to be
more speci᐀�c with your selectors, you use these. For example, what if, rather than
targeting all anchor tags, you only need to target the anchors which are within an
unordered list? This is speci᐀�cally when you'd use a descendant selector.
Protip If your selector looks like X Y Z A B.error , you're doing it
wrong. Always ask yourself if it's absolutely necessary to apply all
of that weight.
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
5. X
5. X
1 a { color: red; }
2 ul { margin‐left: 0; }
What if you want to target all elements on a page, according to their type , rather than
an id or class name? Keep it simple, and use a type selector. If you need to target all
unordered lists, use ul {} .
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
6. X:visited and X:link
1 a:link { color: red; }
2 a:visted { color: purple; }
We use the :link pseudo-class to target all anchors tags which have yet to be clicked
on.
Alternatively, we also have the :visited pseudo class, which, as you'd expected, allows
us to apply speci᐀�c styling to only the anchor tags on the page which have been clicked
on, or visited.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
7. X + Y
1 ul + p {
2 color: red;
3 }
This is referred to as an adjacent selector. It will select only the element that is
immediately preceded by the former element. In this case, only the ᐀�rst paragraph after
each ul will have red text.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
8. X > Y
1 div#container > ul {
2 border: 1px solid black;
3 }
The difference between the standard X Y and X > Y is that the latter will only select
direct children. For example, consider the following markup.
01 <div id="container">
02 <ul>
03 <li> List Item
04 <ul>
05 <li> Child </li>
06 </ul>
07 </li>
08 <li> List Item </li>
<li> List Item </li>
09 <li> List Item </li>
10 <li> List Item </li>
11 </ul>
12 </div>
A selector of #container > ul will only target the ul s which are direct children of the
div with an id of container . It will not target, for instance, the ul that is a child of
the ᐀�rst li .
For this reason, there are performance bene᐀�ts in using the child combinator. In fact, it's
recommended particularly when working with JavaScript-based CSS selector engines.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
9. X ~ Y
1 ul ~ p {
2 color: red;
3 }
This sibling combinator is similar to X + Y , however, it's less strict. While an adjacent
selector ( ul + p ) will only select the ᐀�rst element that is immediately preceded by the
former selector, this one is more generalized. It will select, referring to our example
above, any p elements, as long as they follow a ul .
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
10. X[title]
1 a[title] {
2 color: green;
3 }
Referred to as an attributes selector, in our example above, this will only select the
anchor tags that have a title attribute. Anchor tags which do not will not receive this
particular styling. But, what if you need to be more speci᐀�c? Well...
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
11. X[href="foo"]
1 a[href="http://net.tutsplus.com"] {
2 color: #1f6053; /* nettuts green */
3 }
The snippet above will style all anchor tags which link to http://net.tutsplus.com; they'll
receive our branded green color. All other anchor tags will remain unaffected.
Note that we're wrapping the value in quotes. Remember to also
do this when using a JavaScript CSS selector engine. When
possible, always use CSS3 selectors over unofficial methods.
This works well, though, it's a bit rigid. What if the link does indeed direct to Nettuts+,
but, maybe, the path is nettuts.com rather than the full url? In those cases we can use a
bit of the regular expressions syntax.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
12. X[href*="nettuts"]
1 a[href*="tuts"] {
2 color: #1f6053; /* nettuts green */
3 }
There we go; that's what we need. The star designates that the proceeding value must
appear somewhere in the attribute's value. That way, this covers nettuts.com,
net.tutsplus.com, and even tutsplus.com.
Keep in mind that this is a broad statement. What if the anchor tag linked to some non-
Envato site with the string tuts in the url? When you need to be more speci᐀�c, use ^
and $ , to reference the beginning and end of a string, respectively.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
13. X[href^="http"]
13. X[href^="http"]
1 a[href^="http"] {
2 background: url(path/to/external/icon.png) no‐repeat;
3 padding‐left: 10px;
4 }
Ever wonder how some websites are able to display a little icon next to the links which
are external? I'm sure you've seen these before; they're nice reminders that the link will
direct you to an entirely different website.
This is a cinch with the carat symbol. It's most commonly used in regular expressions
to designate the beginning of a string. If we want to target all anchor tags that have a
href which begins with http , we could use a selector similar to the snippet shown
above.
Notice that we're not searching for http:// ; that's unnecessary,
and doesn't account for the urls that begin with https:// .
Now, what if we wanted to instead style all anchors which link to, say, a photo? In those
cases, let's search for the end of the string.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
14. X[href$=".jpg"]
1 a[href$=".jpg"] {
2 color: red;
3 }
Again, we use a regular expressions symbol, $ , to refer to the end of a string. In this
case, we're searching for all anchors which link to an image -- or at least a url that ends
with .jpg . Keep in mind that this certainly won't work for gifs and pngs .
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
15. X[data-*="foo"]
1 a[data‐filetype="image"] {
2 color: red;
3 }
Refer back to number eight; how do we compensate for all of the various image types:
png , jpeg, jpg , gif ? Well, we could create multiple selectors, such as:
1 a[href$=".jpg"],
2 a[href$=".jpeg"],
3 a[href$=".png"],
4 a[href$=".gif"] {
5 color: red;
6 }
But, that's a pain in the butt, and is inef᐀�cient. Another possible solution is to use
custom attributes. What if we added our own data‐filetype attribute to each anchor
that links to an image?
1 <a href="path/to/image.jpg" data‐filetype="image"> Image Link </a>
Then, with that hook in place, we can use a standard attributes selector to target only
those anchors.
1 a[data‐filetype="image"] {
2 color: red;
3 }
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
16. X[foo~="bar"]
1 a[data‐info~="external"] {
2 color: red;
3 }
4
5 a[data‐info~="image"] {
6 border: 1px solid black;
7 }
Here's a special one that'll impress your friends. Not too many people know about this
trick. The tilda ( ~ ) symbol allows us to target an attribute which has a spaced-
separated list of values.
Going along with our custom attribute from number ᐀�fteen, above, we could create a
data‐info attribute, which can receive a space-separated list of anything we need to
make note of. In this case, we'll make note of external links and links to images -- just
for the example.
1 "<a href="path/to/image.jpg" data‐info="external image"> Click Me, Fool </a>
With that markup in place, now we can target any tags that have either of those values,
by using the ~ attributes selector trick.
1 /* Target data‐info attr that contains the value "external" */
2 a[data‐info~="external"] {
color: red;
3 color: red;
4 }
5
6 /* And which contain the value "image" */
7 a[data‐info~="image"] {
8 border: 1px solid black;
9 }
Pretty nifty, ay?
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
17. X:checked
1 input[type=radio]:checked {
2 border: 1px solid black;
3 }
This pseudo class will only target a user interface element that has been checked - like
a radio button, or checkbox. It's as simple as that.
View Demo
Compatibility
IE9+
Firefox
Chrome
Safari
Opera
18. X:after
The before and after pseudo classes kick butt. Every day, it seems, people are
᐀�nding new and creative ways to use them effectively. They simply generate content
around the selected element.
Many were ᐀�rst introduced to these classes when they encountered the clear-᐀�x hack.
01 .clearfix:after {
02 content: "";
03 display: block;
04 clear: both;
05 visibility: hidden;
06 font‐size: 0;
07 height: 0;
08 }
09
10 .clearfix {
11 *display: inline‐block;
12 _height: 1%;
13 }
This hack uses the :after pseudo class to append a space after the element, and then
clear it. It's an excellent trick to have in your tool bag, particularly in the cases when the
overflow: hidden; method isn't possible.
For another creative use of this, refer to my quick tip on creating shadows.
According to the CSS3 Selectors specification, you should
technically use the pseudo element syntax of two colons :: .
However, to remain compatible, the useragent will accept a single
colon usage as well. In fact, at this point, it's smarter to use the
singlecolon version in your projects.
Compatibility
IE8+
Firefox
Chrome
Safari
Opera
19. X:hover
1 div:hover {
2 background: #e3e3e3;
3 }
Oh come on. You know this one. The of᐀�cial term for this is user action pseudo class .
It sounds confusing, but it really isn't. Want to apply speci᐀�c styling when a user hovers
over an element? This will get the job done!
Keep in mind that older version of Internet Explorer don't respond
when the :hover pseudo class is applied to anything other than an
anchor tag.
You'll most often use this selector when applying, for example, a border‐bottom to
anchor tags, when hovered over.
1 a:hover {
2 border‐bottom: 1px solid black;
3 }
Protip border‐bottom: 1px solid black; looks better than text‐
decoration: underline; .
Compatibility
IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera
20. X:not(selector)
1 div:not(#container) {
2 color: blue;
3 }
The negation pseudo class is particularly helpful. Let's say I want to select all divs,
except for the one which has an id of container . The snippet above will handle that
task perfectly.
Or, if I wanted to select every single element (not advised) except for paragraph tags,
we could do:
1 *:not(p) {
2 color: green;
3 }
View Demo
Compatibility
IE9+
Firefox
Chrome
Safari
Opera
21. X::pseudoElement
1 p::first‐line {
2 font‐weight: bold;
3 font‐size: 1.2em;
4 }
We can use pseudo elements (designated by :: ) to style fragments of an element,
such as the ᐀�rst line, or the ᐀�rst letter. Keep in mind that these must be applied to block
level elements in order to take effect.
A pseudoelement is composed of two colons: ::
Target the First Letter of a Paragraph
1 p::first‐letter {
2 float: left;
3 font‐size: 2em;
4 font‐weight: bold;
5 font‐family: cursive;
6 padding‐right: 2px;
7 }
This snippet is an abstraction that will ᐀�nd all paragraphs on the page, and then sub-
target only the ᐀�rst letter of that element.
This is most often used to create newspaper-like styling for the ᐀�rst-letter of an article.
Target the First Line of a Paragraph
1 p::first‐line {
2 font‐weight: bold;
3 font‐size: 1.2em;
4 }
Similarly, the ::first‐line pseudo element will, as expected, style the ᐀�rst line of the
element only.
"For compatibility with existing style sheets, user agents must also
accept the previous onecolon notation for pseudoelements
introduced in CSS levels 1 and 2 (namely, :firstline, :firstletter,
:before and :after). This compatibility is not allowed for the new
pseudoelements introduced in this specification." Source
View Demo
Compatibility
IE6+
Firefox
Chrome
Safari
Opera
22. X:nth-child(n)
1 li:nth‐child(3) {
2 color: red;
3 }
Remember the days when we had no way to target speci᐀�c elements in a stack? The
nth‐child pseudo class solves that!
Please note that nth‐child accepts an integer as a parameter, however, this is not
zero-based. If you wish to target the second list item, use li:nth‐child(2) .
We can even use this to select a variable set of children. For example, we could do
li:nth‐child(4n) to select every fourth list item.
View Demo
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
23. X:nth-last-child(n)
1 li:nth‐last‐child(2) {
2 color: red;
3 }
What if you had a huge list of items in a ul , and only needed to access, say, the third to
the last item? Rather than doing li:nth‐child(397) , you could instead use the nth‐
last‐child pseudo class.
This technique works almost identically from number sixteen above, however, the
difference is that it begins at the end of the collection, and works its way back.
View Demo
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
Opera
24. X:nth-of-type(n)
24. X:nth-of-type(n)
1 ul:nth‐of‐type(3) {
2 border: 1px solid black;
3 }
There will be times when, rather than selecting a child , you instead need to select
according to the type of element.
Imagine mark-up that contains ᐀�ve unordered lists. If you wanted to style only the third
ul , and didn't have a unique id to hook into, you could use the nth‐of‐type(n)
pseudo class. In the snippet above, only the third ul will have a border around it.
View Demo
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
25. X:nth-last-of-type(n)
1 ul:nth‐last‐of‐type(3) {
2 border: 1px solid black;
3 }
And yes, to remain consistent, we can also use nth‐last‐of‐type to begin at the end of
the selectors list, and work our way back to target the desired element.
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
Opera
26. X:᐀�rst-child
26. X:᐀�rst-child
1 ul li:first‐child {
2 border‐top: none;
3 }
This structural pseudo class allows us to target only the ᐀�rst child of the element's
parent. You'll often use this to remove borders from the ᐀�rst and last list items.
For example, let's say you have a list of rows, and each one has a border‐top and a
border‐bottom . Well, with that arrangement, the ᐀�rst and last item in that set will look a
bit odd.
Many designers apply classes of first and last to compensate for this. Instead, you
can use these pseudo classes.
View Demo
Compatibility
IE7+
Firefox
Chrome
Safari
Opera
27. X:last-child
1 ul > li:last‐child {
2 color: green;
3 }
The opposite of first‐child , last‐child will target the last item of the element's
parent.
Example
Let's build a simple example to demonstrate one possible use of these classes. We'll
create a styled list item.
Markup
Markup
1 <ul>
2 <li> List Item </li>
3 <li> List Item </li>
4 <li> List Item </li>
5 </ul>
Nothing special here; just a simple list.
CSS
01 ul {
02 width: 200px;
03 background: #292929;
04 color: white;
05 list‐style: none;
06 padding‐left: 0;
07 }
08
09 li {
10 padding: 10px;
11 border‐bottom: 1px solid black;
12 border‐top: 1px solid #3c3c3c;
13 }
This styling will set a background, remove the browser-default padding on the ul , and
apply borders to each li to provide a bit of depth.
To add depth to your lists, apply a border‐bottom to each li that is
a shade or two darker than the li 's background color. Next, apply
a border‐top which is a couple shades lighter.
The only problem, as shown in the image above, is that a border will be applied to the
very top and bottom of the unordered list - which looks odd. Let's use the :first‐child
and :last‐child pseudo classes to ᐀�x this.
1 li:first‐child {
2 border‐top: none;
3 }
4
5 li:last‐child {
6 border‐bottom: none;
7 }
There we go; that ᐀�xes it!
View Demo
Compatibility
IE9+
Firefox
Chrome
Safari
Opera
Yep - IE8 supported :first‐child , but not :last‐child . Go ᐀�gure.
28. X:only-child
1 div p:only‐child {
2 color: red;
3 }
Truthfully, you probably won't ᐀�nd yourself using the only‐child pseudo class too
often. Nonetheless, it's available, should you need it.
It allows you to target elements which are the only child of its parent. For example,
referencing the snippet above, only the paragraph that is the only child of the div will
be colored, red.
Let's assume the following markup.
1 <div><p> My paragraph here. </p></div>
2
3 <div>
4 <p> Two paragraphs total. </p>
5 <p> Two paragraphs total. </p>
6 </div>
In this case, the second div 's paragraphs will not be targeted; only the ᐀�rst div . As
soon as you apply more than one child to an element, the only‐child pseudo class
ceases to take effect.
View Demo
Compatibility
IE9+
Firefox
Chrome
Safari
Opera
29. X:only-of-type
1 li:only‐of‐type {
2 font‐weight: bold;
3 }
This structural pseudo class can be used in some clever ways. It will target elements
that do not have any siblings within its parent container. As an example, let's target all
ul s, which have only a single list item.
First, ask yourself how you would accomplish this task? You could do ul li , but, this
would target all list items. The only solution is to use only‐of‐type .
1 ul > li:only‐of‐type {
2 font‐weight: bold;
3 }
View Demo
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
Opera
30. X:᐀�rst-of-type
The first‐of‐type pseudo class allows you to select the ᐀�rst siblings of its type.
A Test
To better understand this, let's have a test. Copy the following mark-up into your code
editor:
01 <div>
02 <p> My paragraph here. </p>
03 <ul>
04 <li> List Item 1 </li>
05 <li> List Item 2 </li>
06 </ul>
07
08 <ul>
09 <li> List Item 3 </li>
10 <li> List Item 4 </li>
11 </ul>
12 </div>
Now, without reading further, try to ᐀�gure out how to target only "List Item 2". When
you've ᐀�gured it out (or given up), read on.
Solution 1
There are a variety of ways to solve this test. We'll review a handful of them. Let's begin
by using first‐of‐type .
1 ul:first‐of‐type > li:nth‐child(2) {
2 font‐weight: bold;
3 }
This snippet essentially says, "᐀�nd the ᐀�rst unordered list on the page, then ᐀�nd only the
immediate children, which are list items. Next, ᐀�lter that down to only the second list
item in that set.
Solution 2
Another option is to use the adjacent selector.
1 p + ul li:last‐child {
2 font‐weight: bold;
3 }
In this scenario, we ᐀�nd the ul that immediately proceeds the p tag, and then ᐀�nd the
very last child of the element.
Solution 3
We can be as obnoxious or as playful as we want with these selectors.
1 ul:first‐of‐type li:nth‐last‐child(1) {
2 font‐weight: bold;
3 }
This time, we grab the ᐀�rst ul on the page, and then ᐀�nd the very ᐀�rst list item, but
starting from the bottom! :)
View Demo
Compatibility
IE9+
Firefox 3.5+
Chrome
Safari
Opera
