Ingus.info

 

Things you should keep in mind about quantity queries and CSS selectors

18.03.2015

Front-End Development

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.

will only select direct children.

So in our example only the direct <p> children will get selected.

will only select direct children sample.

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.

will select only 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.

will only select direct children sample.

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:

select all elements, as long as they follow former element

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.

select all elements, as long as they follow former element

This trick is more common than the previous one.



X:empty

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.

empty pseudo class sample

But use this method carefully and make sure not to remove too much.



X:before, X:after

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.

select all elements, as long as they follow former 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.



X:not(selector)

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.

negation pseudo class sample

In this case we will select all divs, except the ones that has an id of container.

negation pseudo class example



X::pseudoElement

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.

pseudo elements  sample

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.



X[href^="http"]

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.

target all anchor tags that start with

This can be useful if you wish to add a small icon next to the links for example.



X[href="link"]

Style all anchor tags which for example link to http://ingus.info

style all anchor tags which link to

As a result you will get selected the link below:

anchor tags value must appear somewhere in the attribute's value

But lets go further with this..



X[href*="something"]

Select anchor tags with the value that appears somewhere in the attribute's value.

anchor tags value must appear somewhere in the attribute's value

As a result you will get selected the link below:

anchor tags value must appear somewhere in the attribute's value

Bet some of you didn't even know that and we are just getting started.



X[title]

And by the way, don't forget that you can also select elements by their titles.

anchor tags value must appear somewhere in the attribute's value

Nothing groundbreaking but just to remind you..



X[href$=".jpg"]

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.

searching for all anchors which link to an image

As a result you will get selected the link below:

get selected a link that end with jpg

But what if we want to select multiple image formats like jpg,png,gif... Surely we could do something like this:

get selected a link that end with jpg

But there is a much better solution for this problem which you can check in the next paragraph.



X[data-*="data"]

The solution is to use custom attributes. Just add your own data-filetype attribute to each anchor that links to an image.

select anchor tag by the data type attribute

Now you can select your images by using a standard attributes selector:

use a standard attributes selector to target data types

Pretty neat huh?



X[data~="data"]

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.

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".

target data-info attr that contains the value

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:

  • :first-child
  • :last-child
  • :only-child
  • :nth-child(n)
  • :nth-last-child(n)

 

  • :first-of-type
  • :last-of-type
  • :only-of-type
  • :nth-of-type(n)
  • :nth-last-of-type(n)

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:

css3 selectors explained



X:first-child, X:last-child

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.

:first-child :last-child sample



X:only-child

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.

:only-child sample

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.

:only-child sample



X:nth-child(n)

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).

:nth-child sample



X:nth-last-child(n)

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?

:nth-last-child sample



X:first-of-type, X:last-of-type

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

:first-of-type :last-of-type sample

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:

:first-of-type :last-of-type sample



X:only-of-type

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.

:only-of-type sample

And here you go. As easy as that. Of course it will no longer take effect if you add additional list items.

:only-of-type sample



X:nth-of-type(n)

Basically it's the same as in child only it will select an element basing on its type.

:nth-of-type sample

Lets say we might need to select only the second unordered lists. :nth-of-type will do that work just fine.

:first-of-type :last-of-type sample



X:nth-last-of-type(n)

And finally we of course have :nth-last-of-type(n) that can help us begin at the end of the selectors list.

:nth-last-of-type sample

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.

NTH-CHILD vs NTH-OF-TYPE

To accomplish this task we will definitely use :nth-child pseudo class.

NTH-CHILD vs NTH-OF-TYPE

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.

NTH-CHILD vs NTH-OF-TYPE

To achieve this lets use :nth-last-of-type pseudo class:

NTH-CHILD vs NTH-OF-TYPE

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.

CSS target precisely element count

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.

CSS target precisely element count



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.

CSS target more than element count

Of course 6 can be replaced with any positive integer.

CSS target more than element count



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.

CSS target less than element count

Now we are targeting the sixth element to the last, and then all the others 5 that come after it.

CSS target less than element count

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.