How do css standard selectors work?

CSS selectors and XPaths are a very easy way to select mandatory elements on a website. When using CSS there are there standard selectors that are often used.

  • Element Selector – element selectors are used if the HTML elements need to be selected. This could be a div, form, input, ul or anything else that is allowed in the HTML standard. Such elements can be selected by their plain name
Element: <form>
CSS Selector: form
  • ID Selector – many main elements on HTML pages have an id attribute. This attribute should be unique within the whole page. When using the id it is possible to select special elements.
Element: <div id="commentbox">
CSS Selector: #commentbox
  • Class Selector – class selectors are very similar to id selectors. They are used if an element should be selected by one of their class names
Element: <div class="comment active">
CSS Selector: .active

Difference between DOM and HTML

The CSS selector checker knows two content types it can be applied on. DOM and HTML. The DOM (document object model) is the representation of the rendered website. All JavaScript code was called, ads were loaded and lazy loading was triggered for the viewport. 

The HTML document is the initial content that was created by the web server and was transferred to the browser. This content is more stable because no changes by the browser were done. 

Table of contents