You are currently viewing CSS Selectors that you must know

CSS Selectors that you must know

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.

basic selector

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.

type selector

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.

id selector

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.

class selector

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.

data-attr selector

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.

dta-attr value selector

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.

data-attr^ value selector

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.

data-attr$ value selector

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.

data-attr* value selector

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.

grouping selector

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.

descendant combinator

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.

adjacent combinator

iii. X > Y

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

child combinator

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.

sibling combinator

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.

before selector

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.

after selector

iii. X:first-child

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

First-child selector

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.

last-child selector

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.

nth-child selector

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.

nth-last-child selector

vii. X:only-child

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

only-child selector

viii. X:first-of-type

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

first-of-type selector

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.

last-of-type selector

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.

nth-of-type selector

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.

nth-last-of-type selector

xii. X:only-of-type

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

only-of-type selector

xiii. X:not(.Y)

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

not(.Y) selector

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

This Post Has 2 Comments

Leave a Reply