Blog

A variety of selectors are available in CSS3, varying from the beginners level to the advanced level. A person new to this field, might not be aware of these interesting CSS selectors available other than class, id and descendant.

Let’s see what actually selectors are before moving towards the list of selectors, that according to us a CSS coder must know.

What are CSS Selectors?

CSS selectors are element patterns that specify the browser which HTML elements to pick and apply CSS properties on. CSS selectors are basically considered the first part of the CSS rule. It actually targets the elements of HTML that we actually intend to style on our webpage. The elements that are being selected is called the subject of the selector.

A list of CSS Selectors

Basic Selectors

i. *

This selector is known as the universal selector. It is usually used to target all the elements of a certain webpage. You can also use it if you want to restrict it to a specific namespace.

ii. X

This selector is known as the type selector. It can be used to select all the elements of a particular type. You can use it to select all the elements of a particular given node name on a webpage.

iii. #X

This selector is known as the id selector. The items selected by these selectors depends on the value of the id attribute. But the value provided should be unique in the document, which means only one element can exist with the given ID.

iv. .X

This is the class selector which selects elements based on their specific class name attribute. With the help of this selector, a person can select multiple elements. This is because a given class might contain many elements.

Attribute Selectors

i. [data-attr]

It selects the elements which contain the data-attr attribute irrespective of their value. It also selects the data-attr attributes without any value.

ii. [data-attr=”value”]

It actually looks for a particular value. In this case, it will select elements with an attribute value set to the passed value.

iii. [data-attr^=”value”]

There are cases when we want to check the partial match of a value from the beginning, in such a case it’s wise to use begins with attribute. It is used to select the elements that have the value passed in the beginning.

iv. [data-attr$=”value”]

There are cases when we want to check the partial match of a value from the end, in such a case we use ends with attribute. It is used to select the elements with values ending with the value given.

v.[data-attr*”value”]

It is a substring attribute, which is used to select elements with the value passed from anywhere inside an attribute value.

Grouping Selectors

i. X,Y

The or selector picks all the elements that match.

ii. X.Y

The and selector picks all the elements that match all the selector combinations.

Combinators

i. X Y

This is called the descendant combinator. You can consider this as one of the most common selectors. It is used in cases when we look for a more specific selection.

ii. X + Y

This is called the adjacent combinator. It is used when we want to select the element that follows its immediately former element.

iii. X > Y

This is called the direct child combinator. It is used to select the first element’s direct child.

iv. X ~ Y

This is called the sibling combinator. It is used to select siblings. In other words, you can call it a more generalized form of X + Y combinator. It is because it selections the elements that occur immediately after the former element. Whereas X ~ Y selects all the elements.

Pseudo Selectors

i. X:before

It is called the before selector. It is responsible to create an empty element just before the child of the element that has been selected.

ii. X:after

You can compare the after selector to the before selector. It is basically the, same just with a small difference. Just like the before selector, it also creates an empty element but after the child of the element that has been selected.

iii. X:first-child

A first-child selector is basically responsible to select the very first child of the element from inside the container.

iv. X:last-child

It is basically the reverse of first-child container. It selects the last child of the element from inside the container.

v. X:nth- child(n)

In case if we want to select any random element, first-child container or last-child container doesn’t work. In such a case, the nth-child selector comes into the picture. You need to pass the order number of the child in the form of a parameter in this container.

vi. X:nth-last-child(n)

What if we want to select the child from the last? In such a case nth-last-child container comes to the scene. It can easily select the child element from the end.

vii. X:only-child

Only-child selector can be used to select elements that can be considered the only child of a parent.

viii. X:first-of-type

The first-of-type selector can be used to select the sibling elements that are first of the type.

ix. X:last-of-type

Last-of-type selector is basically the opposite of the first-of-type selector. It can be used to select the sibling elements that are the last of the type.

x. X:nth-of -type(n)

If we want to select the element’s only type from the middle, we may use the nth type selector and supply the child’s order number as a parameter.

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

nth last of type selector is basically the exact reverse of the nth type selector. It selects the only type element but from the last.

xii. X:only-of-type

The only type selector allows you to select elements that are the parent’s only-of-type element.

xiii. X:not(.Y)

The not selector allows you to allow all components inside the not selector that do not match the selector.

You can check out the “Techniques of Cryptography” blog. Click here