Implement filters in pure CSS through the :has() pseudo-class and attribute selectors
Take a look at the effect of this example first
๐
๐
๐
๐
๐ฅ
๐
โ๐
๐
๐ฅญ
๐
๐
๐
๐
๐
๐
๐ซ
โ๐
๐ซ
:has() pseudo-class and attribute selector
Let’s learn about these two selectors through the following small example
Attribute selector
I am
I am
1
2
3
4
5
6
7
<!-- Pseudo-elements will be added when the mouse touches them --><divlinkto='box1'>I am</div><divlinkto='box2'>I am</div><style>div[linkto='box1']:hover::after{content:'box1'}div[linkto='box2']:hover::after{content:'box2'}</style>
In this example, the two divs do not have any class names, but are given a custom attribute linkto. We can use this to select them through [linkto='box1'] and assign pseudo elements.
How to use
In addition to the exact match of a certain attribute value in this example, attribute selectors have many other uses:
Match attribute name
img[alt]
This selector will select all img elements with an alt attribute, regardless of the alt content.
Exactly match attribute
img[hidden="true"]
This selector will select all img elements with a hidden attribute and a value of true. We can easily hide the element by adding the display:none style to this selector.
Match the existence of a certain attribute value
img[tag~="hd"]
This selector can find all img elements with a tag attribute and a value of hd. For example, the selector above can select elements such as <img tag="hd cover"/> and <img tag="sport football hd"/>.
Match attribute values โโwith a certain prefix
There are two ways to match prefixes:
span[lang|="zh"]
This selector can select all span elements whose lang attribute values โโstart with ‘zh-’, such as <span lang="zh-TW">, <span lang="zh-CN">.
img[type^="low"]
This selector can select all img elements whose type attributes start with ’low’, such as <img type="lowPower"/>, <img type="lowLevel"/>. The difference between it and the above is that it can match words that are not separated by ‘-’.
Match attribute values โโwith a certain suffix
img[type$="ball"]
This selector can select all img elements whose type attributes end with ‘ball’, such as <img type="football"/>, <img type="basketball"/>.
Match attribute values โโcontaining a certain string
img[type*="0"]
This selector can select all img elements whose type attribute contains ‘0’, such as <img type="110"/>, <img type="4008208820"/>.
:has() pseudo class
I am
I am
1
2
3
4
5
6
7
8
9
10
<divclass="cont-box"><!-- Touch these boxes, the disply-box below will display pseudo elements --><divlinkto='box3'>I am</div><divlinkto='box4'>I am</div></div><divclass="disply-box"></div><style>.cont-box:has(>[linkto="box3"]:hover)+.disply-box::after{content:'box3'}.cont-box:has(>[linkto="box4"]:hover)+.disply-box::after{content:'box4'}</style>
Because the hovered element is wrapped by cont-box, the father’s brothers cannot be selected directly through the subsequent sibling selector. We can give the father :has() pseudo-class to indirectly select.
About the :has() selector
When the selector in the brackets is true, the pseudo-class will take effect.
h1:has(+ p)
In this example, the adjacent sibling selector is put in. When a h1 tag is followed by a p tag, this pseudo-class will take effect. In this way, you can give styles to the h1 tag before the p tag while other h1 tags are not affected.
.cont-box:has(>[linkto="box4"]:hover)
Let’s interpret the selector in the example; the content in the brackets is >[linkto="box4"]:hover, which means that there is a child element, the linkto attribute value of this child element is box4, and it is being touched by the mouse. Combined with the :has() pseudo-class, it is to find the .cont-box with such a child element and give it a style.
