CSS Selectors

In this section, you'll learn the basics of CSS Selectors.

What is a CSS Selectors?

The CSS Selectors is a pattern used to select and target HTML elements on a webpage. It was initially designed for defining element styles in stylesheets, but it also works for web interactions and data scraping.

In Tapicker, by specifying selector rules, you can precisely select one or more elements on a page and perform various operations on them, such as extracting data, clicking buttons, entering text, and more.

In summary, CSS Selectors are efficient and flexible tools for selecting web elements and form the foundation of Tapicker's web automation and data scraping capabilities.

Selector Types

You can select specific elements on a webpage based on their tag, class, ID, attribute, and more. Below are some common CSS Selectors and their usage:

1. Basic Selectors

Element Selector

Selects all elements of a given tag.
```
div /* Selects all <div> elements on the page */
```
ID Selector

Selects an element based on its unique id attribute. The ID selector is prefixed with #.
```
#header /* Selects the element with id "header" */
```
Class Selector

Selects elements based on their class attribute. The class selector is prefixed with ..
```
.button /* Selects elements with class "button" */
```

2. Attribute Selectors

[attr="value"] Selects elements with a specific attribute and value.

input[type="text"] /* Selects all <input> elements with type="text" */

[attr^="value"] Attribute value starts with a specific string.

a[href^="https"] /* Selects all <a> elements where href starts with "https" */

[attr$="value"] Attribute value ends with a specific string.

img[src$=".jpg"] /* Selects all <img> elements where src ends with ".jpg" */

[attr*="value"] Attribute value contains a specific string.

a[href*="example"] /* Selects all <a> elements where href contains "example" */

3. Combination Selectors

Descendant Selector

Selects all specified elements that are descendants of a certain element, separated by a space.
```
div p /* Selects all <p> elements inside any <div> */
```
Child Selector

Selects only direct child elements of a certain element, separated by >.
```
ul > li /* Selects direct child <li> elements of any <ul> */
```
Adjacent Sibling Selector

Selects the next sibling element that immediately follows a certain element, separated by +.
```
h1 + p /* Selects the first <p> element immediately after any <h1> */
```
General Sibling Selector

Selects all sibling elements after a certain element, separated by ~.
```
h1 ~ p /* Selects all <p> elements following any <h1> */
```

4. Pseudo-class Selectors

:first-child Selects the first child element.

li:first-child /* Selects the first <li> child element */

:last-child Selects the last child element.

li:last-child /* Selects the last <li> child element */

:nth-child(n) Selects the nth child element.

li:nth-child(2) /* Selects the second <li> child element */

:has(selector) Selects elements that contain a specified selector.
```
li:has(a) /* Selects <li> elements that contain <a> */
```

:not(selector) Selects elements that do not match the specified selector.

li:not(.active) /* Selects <li> elements that do not have class="active" */

5. Custom Selectors

In addition to standard selectors, we provide the :shadow selector and enhance the :scope selector to be usable on its own.

:shadow Selects elements inside the Shadow DOM.

product-card:shadow h3.title /* Selects <h3 class="title"> inside <product-card> */

:scope Selects the element itself.

li:scope /* Selects the <li> element itself */

Selector Overview

For easy reference, we've compiled a table of common selectors below:

Selector	Example	Description
.class	.foo	Selects all elements with class="foo"
#id	#foo	Selects the element with id="foo"
element	p	Selects all `<p>` elements
element element	div p	Selects all `<p>` elements inside `<div>` elements
element > element	div > p	Selects all `<p>` elements that are direct children of `<div>`
element + element	div + p	Selects the first `<p>` element immediately following a `<div>`
[attribute]	[target]	Selects all elements with the target attribute
[attribute=value]	[target="_blank"]	Selects all elements with target="_blank"
[attribute~=value]	[title~="flower"]	Selects all elements with a title attribute containing the word "flower"
[attribute\|=language]	[lang\|="en"]	Selects all elements with lang="en" or starting with "en-"
[attribute^=value]	a[href^="https"]	Selects all elements where the href attribute starts with "https"
[attribute$=value]	a[href$=".pdf"]	Selects all elements where the href attribute ends with ".pdf"
[attribute*=value]	a[href*="foo"]	Selects all elements where the href attribute contains the substring "foo"
:nth-child(n)	p:nth-child(2)	Selects all `<p>` elements that are the second child of their parent
:nth-last-child(n)	p:nth-last-child(2)	Selects all `<p>` elements that are the second child of their parent, counting from the last
:nth-of-type(n)	p:nth-of-type(2)	Selects all `<p>` elements that are the second `<p>` element of their parent
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects all `<p>` elements that are the second `<p>` element of their parent, counting from the last
:first-child	p:first-child	Selects all `<p>` elements that are the first child of their parent
:last-child	p:last-child	Selects all `<p>` elements that are the last child of their parent
:has(selector)	p:has(a)	Selects all `<p>` elements containing an `<a>` element
:not(selector)	p:not(.active)	Selects all `<p>` elements that do not have the class `active`