Match elements with `^`, `$`, `*` and `~` using CSS or Testing framework
We were able to use these characters in selectors to filter which ones we want to be modifying in CSS or testing in some testing framework like Cypress or Playwright.
Tags
NOTE It is important to know the basics of HTML and CSS to understand the content of this page.
Getting selectors with ^
Using ^ in the selector, we will filter all the elements that contain the attribute with the value that starts with what we pass.
For example a 'ball' class, we can get this selector like this [class^=ba].
If we have, besides the 'ball' class, the 'ballon' class, the same get [class^=ba] will return the 2 elements.
HTML example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>^ match selector</title>
<style>
/* gets all elements that contain some class that starts with the letter `a` */
li[class^=a] {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li class="b">Item 2</li>
<li class="a b">Item 3</li> <!-- take this -->
<li class="ba">Item 4</li>
</ul>
</body>
</html>
If you run this html, you will see that only item 3 has a red background. Because it starts with class a.
Getting selectors with $
This character is very similar to ^ that we saw above, the difference is that instead of starting with that get, it takes element ends with that get.
For example, a 'ball' class, we can get this selector like this [class$=ll].
HTML example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$ match selector</title>
<style>
/* gets all elements that contain some class that ends with the letter `a` */
li[class$=a] {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="b">Item 1</li>
<li class="ba">Item 2</li> <!-- take this -->
<li class="a b">Item 3</li>
<li class="b a">Item 4</li> <!-- take this -->
</ul>
</body>
</html>
See that we have returned 2 elements that end with class a in this example. Item 2 and 4 will have the text color in red.
Getting selectors with *
Here we can do a contain get, if the element contains the attribute with the value n anywhere in it, it will return that. It can be at the beginning, end or middle.
For example the 'ball' class, if we use these getters [class*=ba], [class*=al], [class*=ll] or any letter that contains in ball it will return this element . That's pretty generic!
HTML example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>* match selector</title>
<style>
/* gets all elements that contain some class that contains the letter `a` */
li[class*=a] {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li class="b">Item 2</li>
<li class="a b">Item 3</li> <!-- take this -->
<li class="ab">Item 4</li> <!-- take this -->
</ul>
</body>
</html>
Here we will have Item 3 and 4 element that contain a class that contains a value that has the letter a.
Getting selectors with ~
This is the least used of them, because we get the same return when we use a . at the beginning of a class or # in ids. But it can be useful for other attributes where we don't have known aliases.
Here we will return an element with the exact value that was passed or when we have a space before or after.
For example the 'ball' class, we can use the getter [class~=ball] or [class~=everton ball] which will return the element.
HTML example:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>~ match selector</title>
<style>
/* Either exactly `a`, or have `a` followed by some space before or after. */
li[class~=a] {
background-color: red;
}
/* This is the same as the example above, being a simpler alias. */
li.a {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li class="b">Item 2</li>
<li class="a b">Item 3</li> <!-- take this -->
<li class="ba">Item 4</li>
</ul>
</body>
</html>
See that .li is equal to li[class~=a] and we only have item 3 returned because it has a space between a and b. The value must be exact or separated from other values by a space.
Conclusion
Here we see 4 types of characters to get using CSS or some other tool with the same type of getter. It is very useful to filter the elements that we want to get.
You can see the code samples and download them on my GitHub using this link: https://github.com/vertocode/css/tree/main/match-selectors
Any questions, you can contact me, I'm always willing to help!
Thanks for reading.