CSS Selectors

Another common way to navigate through HTML files other than XPaths is CSS Selectors.

CSS (Cascading Style Sheets) is the language that describes how HTML elements are displayed on your screen.

The notation of CSS Selectors is very familiar with XPathes. Let’s learn!

In the syntax of the XPathes / means to move forward to one generation, in CSS Selectors for this purpose is >. For example:

These two variables point to the same tag in different ways. Pay attention that we ignore the first / by replacing XPath notation with CSS Selector.

To pass tags in XPathes we used //. With CSS Selectors, you can just use the space (miss the symbol). Keep in mind that we also ignore the first // by converting from XPaths if it's the first symbol. For instance, the two same expressions:

To specify which tag we want to extract, you should write :nth-of-type() with the number of tags as the parameter. For example:

In the code above, we mentioned two ways to the second div tag in body tags.

Sometimes, you need a unique indicator for not counting all tags. For this purpose, you can use the id attribute. To find the element of the file by id with CSS Selectors, use a # sign:

In the code, the CSS Selector and XPath navigate to the div tag whose id is equal to id1.

To build a path to all elements belonging to the class, even if they belong to other classes, use a period . after tag’s name. For instance:

Here in the first line, XPath selects only div tags whose classes are equal to class1. In the second line, CSS Selector navigates to all tags which belong to the class1. The difference is that in the second case, the selected tag can also belong to another class (class2), but in the first case not.