Things you should keep in mind about quantity queries and CSS selectors
So I guess you already know the base id, class and descendant selectors. And this is quite enough for you to get the job done. If so, you're missing out on a lot of stuff and most likely your code is pretty messy. I know that sometimes it's hard to remember all of them so lets go through the ones that are quite interesting, rear and most importantly really useful.
Lets start with the simple ones and move on to more and more complex combinations.
X > Y
X > Y combination will only select direct children.
So in our example only the direct <p> children will get selected.
Note that if we remove ">" sign the p tag inside span will also get selected.
X + Y
X + Y combination will onlyselect the element that is immediately preceded by the former element.
So in our example only the one p element will get selected, and only the one that goes immediately after the ul tag.
This method is quite rear but sometimes very useful.
X ~ Y
X ~ Y combination is quite similar to X + Y combination only less strict. While a previous selector (X + Y) will only select the first element that is immediately preceded by the former selector, this one will select all elements, as long as they follow the former element. Lets have the same example:
So now, not only the one p element that goes immediately after the ul tag will get selected, but also all other p elements as well.
This trick is more common than the previous one.
Another useful pseudo class that can be very helpful when using complex CMS systems and visual editors. In many cases visual editors generate new empty elements when user clicks Enter (for example). By using :empty pseudo class we can remove all the elements that are being created accidentally.
But use this method carefully and make sure not to remove too much.
Nowadays before and after got really popular and there are dozens ways to use them. In short the just create a content around the selected elements. Here is an example if you wish to add an icon before your element.
But before and after pseudo classes are capable of so much more. Check out this website to see what is possible to achieve by using ONLY one div and before and after pseudo classes.
The negation pseudo class will select all elements but the ones that you are mentioning and sometimes it is quite useful. Lets have an example.
In this case we will select all divs, except the ones that has an id of container.
We can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. Keep in mind that these must be applied to block level elements in order to take effect.
Unfortunately there is no ::first-word element. To accomplish this task you will need to use JS and play around with regular expressions as well since you might have some kind of an icon in front of the first word or use font awesome icons which might be a problem for you to determine the first word in your sentence. But that's a different topic. First-line and first-letter pseudo elements can be very useful.
To target all anchor tags that have a href which begins with http, we can use a selector similar as we would use it in the regular expressions.
This can be useful if you wish to add a small icon next to the links for example.
Style all anchor tags which for example link to http://ingus.info
As a result you will get selected the link below:
But lets go further with this..
Select anchor tags with the value that appears somewhere in the attribute's value.
As a result you will get selected the link below:
Bet some of you didn't even know that and we are just getting started.
And by the way, don't forget that you can also select elements by their titles.
Nothing groundbreaking but just to remind you..
In this case we're searching for all anchors which link to an image or to a link that ends with .jpg. Again, we use a regular expressions symbol, $, to refer to the end of a string.
As a result you will get selected the link below:
But what if we want to select multiple image formats like jpg,png,gif... Surely we could do something like this:
But there is a much better solution for this problem which you can check in the next paragraph.
The solution is to use custom attributes. Just add your own data-filetype attribute to each anchor that links to an image.
Now you can select your images by using a standard attributes selector:
Pretty neat huh?
And while we are talking about data-types here is another useful method to work with them - the tilda (~) sign. It allows us to target an attribute which has a spaced-separated list of values.
Now you can target data-info attr that contains the value "external" or "image".
The trick that very often gets forgotten.
CSS 3 Selectors and pseudo classes.
Now lets talk about CSS3 selectors. At first it seems like there is quite a lot of them. But lets just try to group them and see how many there are.
There are 5 main child selectors, and 5 type selectors. Here they are:
As you can see they are quite similar. So lets go through them and see how we can use them. Here is a little diagram for you to begin with:
This pseudo class allows us to target only the first child or the last child of the element's parent. One of the most common usage of this selector is to remove borders from the first and last list items in the navigation menu.
The pseudo class is quite a rare one but sometimes can be pretty handful. So keep it in mind. It allows you to target elements which are the only child of its parent.
In our example, the second div's paragraphs will not be targeted. But don't forget, as soon as you apply more than one child to an element, the only-child pseudo class will no longer take effect.
Nth-child helps us to target specific element. Keep in mind that it accepts only an integer as a parameter and it's not zero based. To target fourth li item you use li:nth-child(4).
The same goes for the nth-last-child(n). Only we start counting from the last element. Often is used in case we might need to target second to the last item given that total item count is pretty huge. Of course we could use something like :nth-child(1050) but this doesn't look as pretty as :nth-last-child(2) right?
The first-of-type pseudo class allows you to select the first siblings of its type. The cool thing is that you can combine multiple pseudo classes. Check out the example to see what I meanL
See what I mean? First of all we target only the first ul element. Then going through its direct children selecting the second list item. Of course there are multiple ways to select that item but this is only one of them using :first-of-type. The result is:
Only-of-type pseudo class will target elements that do not have any siblings within its parent container. It gets quite often forgotten and quite hard to accomplish without adding additional classes. Luckily for us we can use :only-of-type.
And here you go. As easy as that. Of course it will no longer take effect if you add additional list items.
Basically it's the same as in child only it will select an element basing on its type.
Lets say we might need to select only the second unordered lists. :nth-of-type will do that work just fine.
And finally we of course have :nth-last-of-type(n) that can help us begin at the end of the selectors list.
So here you go. Of course these are not all pseudo classes and elements that exists but these are the most important commonly used I would say. You can check the full list here.
X:nth-child VS X:nth-of-type
The :nth-child and :nth-of-type both have different advantages depending on what you are trying to achieve and you can use them depending on your markup. Lets say you have something like this and you need to select all elements except the first to.
To accomplish this task we will definitely use :nth-child pseudo class.
The advantage of :nth-of-type, on the other hand, is that you are able to target groups of like elements where other siblings of different types are present. For example, you could target the quantity of paragraphs in the following snippet, despite them being bookended by a div and a blockquote.
To achieve this lets use :nth-last-of-type pseudo class:
Here you go. First of all we target the first p element (sixth from the bottom), and the we target all the rest that comes after the first one.
Is that's all?
So we've gone through some pretty interesting stuff but what about usage? Are there any interesting ways to use these elements? Definitely. Lets go through some interesting examples that can be used in our daily front-end developers life.
Exactly 6 elements
Now how would you solve the problem if you had to apply your styles only in case there are exactly 6 elements? Things get really interesting when concatenating :nth-last-child(6) with :first-child, introducing a second condition. In this case, I am looking for any element that is both the sixth element from the end and the first element.
In the following example, the elements each adopt a bold if there are precisely six of them in total. Now in case there are more or less list items the styles won't get applied. No need to use JS and write different conditions.
More or equal to 6 elements
But what if we want to apply our styles only in case there are 6 elements or more?
To begin solving the problem properly, what we really need is to create a set of elements that excludes the last five items. Using :nth-last-child(n+6) I can apply the switched layout properties to all “last elements” starting from the sixth, counting back toward the beginning of the set.
If the set is greater than or equal to six in total, then all that remains is to style those last five items as well. This is easy: where there are more than six items, one or more items that “return true” for the nth-last-child(n+6)condition must exist. Any and all of these extant elements can be combined with “~” to affect all items (including the last five) that follow it.
In effect, the use of “-” switches the direction of the selection: instead of pointing toward the start from the sixth, it points toward the end from the sixth.
Of course 6 can be replaced with any positive integer.
Equal or less than 6 elements
Now lets try do the opposite and define the case when there are exactly 6 elements or less.
In this case we are using the same technique as in :only-of-type example, only the opposite of that switching it to “fewer than or equal to n.” It is possible by negating n and reinstating the :first-child condition.
Now we are targeting the sixth element to the last, and then all the others 5 that come after it.
You can play quite a lot with these elements. Here I just showed 3 ways to use them depending on your websites content. You can use this technique in the navigation menu for example. While it's a short one use one styles. As soon as it gets big enough and doesn't fit you anymore apply new additional styles and so on.
What about the support?
Well, all of the CSS2.1 and CSS3 selectors that we talked about are supported in Internet Explorer 9 and above, including other reasonably recent browsers and mobile devices.