Complete in depth guide on CSS selector

1. Universal selector

This selector is denoted by asterisk symbol i.e. *. This selector selects all the elements on the webpage which means whatever css is written under universal selector is applied to all the elements on the webpage. For example:
HTML code:

    <h1>Cricket</h1>
    <span>ODI</span>
    <div>Day Night Match</div>
    <table>
      <caption>
        Wickets taken by different bowlers in a match
      </caption>
      <tr>
        <th>S.No</th>
        <th>Player Name</th>
        <th>Overs</th>
        <th>Runs</th>
        <th>Wickets</th>
      </tr>
      <tr>
        <td class="bg-pink text-white">1</td>
        <td class="bowler">Seamer 1</td>
        <td id="test">9.5</td>
        <td>47</td>
        <td>2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Seamer 2</td>
        <td>10</td>
        <td>40</td>
        <td>3</td>
      </tr>
      <tr>
        <td>3</td>
        <td>All Rounder</td>
        <td>10</td>
        <td>49</td>
        <td>1</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Spinner 1</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Spinner 2</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
    </table>
    <br/>
    <div>Man of the tournament</div>
    <ul>
      <li>Best batsman</li>
      <li>Best all rounder</li>
      <li>Best spinner</li>
      <li>Best seamer</li>
    </ul>
    <div>
      <li>Man of the match</li>
      <ul>
        <li>Best bowling figure</li>
        <li>Highest run scorer</li>
      </ul>
      <li>All round performance</li>
    </div>
    <section>
      <p class="team1">India</p>
      <p>Australia</p>
      <p>South Africa</p>
      <p>New Zealand</p>
      <p>England</p>
    </section>

CSS code:

*{
    background-color: grey;
    color: white;
    font-size: xx-large;
}

Output:

We can see the background color of the whole page and all the elements is grey, text color of all the elements is white and font size of all the elements is xx-large.
The universal selector can be easily overwritten by any other specific selector. For example, if we want to change the background color of only the table then we can do so and then the background color of the whole page will remain grey except the table.
For example:
CSS code:

*{
    background-color: grey;
    color: white;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

Output:

2. Individual selector

This selector selects the elements based on their tag name. For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

Output:

The background color of whatever is written inside the tag table data (td) has turned black.
Hence, this selector selects all of the table data available not only in the table but on the web page because this is an individual selector.

If there would have been more than one table on the webpage, then the background color of table data of all the tables on the webpage would have turned black.
The css written for the table is also an example of individual selector i.e. this selector targets all of the table/tables on the webpage.

Similarly, we can target all of the p tags, li tags, ul tags, etc on the webpage.

3. Class selector

This selector selects an element that has a specific class name. To select a class, dot(.) along with class name is used. Any random name can be given to a class in HTML.
For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

Output:

The class bowler is selected, so the background color of Seamer 1 has turned blue.
More than one element can have the same class name in HTML. For example:
HTML code:

    <h1>Cricket</h1>
    <span>ODI</span>
    <div>Day Night Match</div>
    <table>
      <caption>
        Wickets taken by different bowlers in a match
      </caption>
      <tr>
        <th>S.No</th>
        <th class="bowler">Player Name</th>
        <th>Overs</th>
        <th>Runs</th>
        <th>Wickets</th>
      </tr>
      <tr>
        <td class="bg-orange text-white">1</td>
        <td class="bowler">Seamer 1</td>
        <td id="test">9.5</td>
        <td>47</td>
        <td>2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Seamer 2</td>
        <td>10</td>
        <td>40</td>
        <td>3</td>
      </tr>
      <tr>
        <td>3</td>
        <td>All Rounder</td>
        <td>10</td>
        <td>49</td>
        <td>1</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Spinner 1</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Spinner 2</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
    </table>
    <br/>
    <div>Man of the tournament</div>
    <ul>
      <li>Best batsman</li>
      <li>Best all rounder</li>
      <li>Best spinner</li>
      <li>Best seamer</li>
    </ul>
    <div>
      <li>Man of the match</li>
      <ul>
        <li>Best bowling figure</li>
        <li>Highest run scorer</li>
      </ul>
      <li>All round performance</li>
    </div>
    <section>
      <p class="team1">India</p>
      <p>Australia</p>
      <p>South Africa</p>
      <p>New Zealand</p>
      <p>England</p>
    </section>

CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

Output:

In table heading (th), Player Name and in table data (td) Seamer 1 has the same class name i.e. bowler, so the background color of both Player Name and Seamer 1 has turned blue.

4. ID Selector

This selector selects an element with a specific id name. It is also known as an identity selector. Unlike class, the id name given to an element must be unique in HTML i.e. only one element can have a unique id name in HTML. Any random name can be given to an id in HTML.
To select an id, hash symbol (#) along with the id name is used. For example:

CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

Output:

In table data (td) 9.5 is given an id named as test. So, the background color of 9.5 under Overs column has turned brown.

5. Chained Selector

This selector is known as chained selector because in this selector we use
back-to-back dots without any space. For example:
CSS Code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained / and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

Output:

Chained selector is also known as and selector.

6. Combined Selector

In combined selector, we select multiple elements using coma (,). For example:
HTML code:

    <h1>Cricket</h1>
    <span>ODI</span>
    <div>Day Night Match</div>
    <table>
      <caption>
        Wickets taken by different bowlers in a match
      </caption>
      <tr>
        <th>S.No</th>
        <th>Player Name</th>
        <th>Overs</th>
        <th>Runs</th>
        <th>Wickets</th>
      </tr>
      <tr>
        <td class="bg-orange text-white">1</td>
        <td class="bowler">Seamer 1</td>
        <td id="test">9.5</td>
        <td>47</td>
        <td>2</td>
      </tr>
      <tr>
        <td class="second">2</td>
        <td>Seamer 2</td>
        <td>10</td>
        <td>40</td>
        <td>3</td>
      </tr>
      <tr>
        <td>3</td>
        <td>All Rounder</td>
        <td>10</td>
        <td>49</td>
        <td>1</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Spinner 1</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Spinner 2</td>
        <td>10</td>
        <td>48</td>
        <td>2</td>
      </tr>
    </table>
    <br/>
    <div>Man of the tournament</div>
    <ul>
      <li>Best batsman</li>
      <li>Best all rounder</li>
      <li>Best spinner</li>
      <li>Best seamer</li>
    </ul>
    <div>
      <li>Man of the match</li>
      <ul>
        <li>Best bowling figure</li>
        <li>Highest run scorer</li>
      </ul>
      <li>All round performance</li>
    </div>
    <section>
      <p class="team1">India</p>
      <p>Australia</p>
      <p>South Africa</p>
      <p>New Zealand</p>
      <p>England</p>
    </section>

CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained/and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

/* comibned selector - kind of an and selector*/
h1, span, .second{
    background-color: skyblue;
}

Output:

In table data, under S.No, 2 is given a class second. Tags h1, span and class second are being selected using coma(,) and are given background color of sky blue.

7. Inside an element selector

In this selector, we can go as much inside (or in-depth) of an element as we want and then select an element. Simply, we can select an element inside an element.
For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained/and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

/* comibned selector - kind of an and selector*/
h1, span{
    background-color: skyblue;
}

/* inside an element - these are also very precise selector, you can go as much in depth as you can*/
div ul li{
    background-color: purple;
}

Output:

In HTML code, we have div ul li containing Man of the tournament, Best batsman,-----------, Best seamer and we have div li ul li li containing Man of the match, -----------------------, All round performance but only the background color of li containing Best bowling figure, Highest run scorer has turned purple, but background color of li containing Best batsman,---------, Best seamer, li containing Man of the match and li containing All round performance has not turned purple.

This happened because our path was div ul li which means we want to go inside div which immediately contains ul and that ul must immediately contain li.

Every tag has an opening tag and a closing tag. For example, the opening tag of div tag is <div> and closing tag of div tag is </div>.

Our path was div ul li, which means inside a div, we will only enter that ul which is within the opening tag and closing tag of that div and inside that ul, we will only enter that li which is within the opening tag and closing tag of that ul and this path
(div ul li) is only fulfilled by the li elements Best bowling figure and Highest run scorer.

Other li elements like Best batsman,---------------, Best seamer, li element Man of the match and li element All round performance does not follow our path (div ul li). Hence, the background color of such li elements which does not follow our path
(div ul li) has not turned purple.

8. Direct child selector

In this selector, we target an element that comes in the very next level of hierarchy inside an element using > symbol. For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    border-spacing: 10px;
    background-color: pink;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained/and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

/* comibned selector - kind of an and selector*/
h1, span{
    background-color: skyblue;
}

/* inside an element - these are also very precise selector, you can go as much in depth as you can*/
div ul li{
    background-color: purple;
}

/* direct child*/
div>li{
    background-color: green;
}

Output:

li element Man of the match and li element All round performance are the direct child of the element div because these li elements come immediately after div inside that div, so the background color of these li elements turned green.

Similarly, ul (containing li elements Best bowling figure and Highest run scorer) is the direct child of the same div. But we have not targeted ul.

li elements Best bowling figure and Highest run scorer are the grandchild of the same div.

9. Adjacent sibling selector

This selector selects the very next element of an element in the same level of hierachy. Plus (+) symbol is used in this selector. For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    background-color: pink;
    border-spacing: 10px;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained/and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

/* comibned selector - kind of an and selector*/
h1, span{
    background-color: skyblue;
}

/* inside an element - these are also very precise selector, you can go as much in depth as you can*/
div ul li{
    background-color: purple;
}

/* direct child*/
div>li{
    background-color: green;
}

/* adjacent sibling selector + */
.team1 + p{
    background-color: red;
}

Output:

Element India is given class team1 and + p is written after .team1 (.team + p) in css code which means the background color of very next p element (Australia) after team1 in the same level of hierarchy as that of team1 has turned red.
According to HTML code, Australia is the sibling of India as both are in the same level of hierarchy and Australia is the very next element of India, hence the selector is adjacent sibling selector.

10. Subsequent sibling selector

This selector selects all the next elements of an element in the same level of hierarchy. Tilde symbol (~) is used in this selector. For example:
CSS code:

*{
    background-color: grey;
    color: #ffffff;
    font-size: xx-large;
}

table{
    background-color: pink;
    border-spacing: 10px;
}

/* individual selector */
td{
    background-color: black;
}

/* class selector */
.bowler{
    background-color: blue;
}

/* id selector */
#test{
    background-color: brown;
}

/* chained/and selector - back to back dot without any spaces, it needs to be very specific*/
td.bg-orange.text-white{
    background-color: orange;
}

/* comibned selector - kind of an and selector*/
h1, span{
    background-color: skyblue;
}

/* inside an element - these are also very precise selector, you can go as much in depth as you can*/
div ul li{
    background-color: purple;
}

/* direct child*/
div>li{
    background-color: green;
}

/* adjacent sibling selector + */
.team1 + p{
    background-color: red;
}

/* subsequent sibling selector ~ */
.team1 ~ p{
    background-color: red;
}

Output:

Element India is given class team1 and ~ p is written after .team1 in the CSS code (.team1 ~ p) which means the background color of all the p elements after team1 in the same level of hierarchy as that of team1 will turn red.

Hence, the color of Australia, South Africa, New Zealand and England has turned red.

11. Pseudo selector ::before

The pseudo selector before is used to insert anything before an element. To use before pseudo selector, ::before is used. For example:
HTML code:

    <p>All countries must implement population control to fight climate change</p>

CSS code:

body{
    background-color: grey;
}

p{
    font-size: 50px;
    color: #ffffff;
}

p::before{
    content: "**";
    color: aqua;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: orange;
}

Output:

Inside the before selector, content property (content = " ** ") is given. This content property is must while using before selector. Without content property, before selector will not work. Inside, the content property we can write any text or we can leave the content property blank (content = " ") but at least content property must be mentioned like this content = " " in order to use before selector and then we can make any circle, etc before an element.
To make a circle, border-radius half the value of height and width is used or we can give a 50% value to the border radius.

12. Pseudo selector :: after

The pseudo selector after is used to insert anything after an element. To use after pseudo selector, ::after is used. For example:
HTML code:

    <p>All countries must implement population control to fight climate change</p>

CSS code:

body{
    background-color: grey;
}

p{
    font-size: 50px;
    color: #ffffff;
}

p::after{
    content: " #";
    color: aqua;
}

Output:

Likewise before pseudo selector, content = " " is must to use after pseudo selector without which after pseudo selector will not work.
We want to insert # after paragraph, so we have written content = " #".
There is space before hash (#) in content = " #", that's why there is space between e of change and hash (#) in output.

If we want to insert an image before and after an element, we can do so by using absolute position, width and height.

First and foremost, content property must be given (content = " ") without which before and after pseudo selector will not work. Since, we only want to insert an image and we don't want to write any text hence nothing is written in content property (content = " "). Absolute position, width and height properties are required to render/display the image on the webpage. Both width and height should be given 100% value. For example:
HTML code:

    <div class="sport">Cricket is one of the most played sports in the world</div>

CSS code:

body{
    background-color: grey;
}

.sport{
    margin: auto;
    width: 50%;
    font-size: 100px;
}

.sport::before{
    content: "";
    background-image: url("asset/cricket-ball.png");
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

.sport::after{
    content: "";
    background-image: url("asset/cricket-bat.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

Output:

13. Pseudo selector :hover

This selector is used to give different css properties to an element when we move/hover cursor over that element. For example:
HTML code:

    <button>Submit</button>

CSS code:

body{
    background-color: grey;
}

button{
    background-color: red;
    width: 200px;
    height: 50px;
    font-size: xx-large;
}

button:hover{
    background-color: skyblue;
}

Before moving/hovering cursor over the submit button, the submit button looks red:

Output:

After hovering/moving cursor over the submit button the button will look sky blue:

14. Pseudo selector :focus

This selector is used to give different css properties to an element when we click/focus on that element. For example:
HTML code:

    <input type="text">

CSS code:

body{
    background-color: grey;
}

input{
    height: 35px;
    width: 300px;
    font-size: x-large;
}

input:focus{
    background-color: orange;
}

Before clicking/focusing on the input the background color of input will look default i.e. white:

Output:

After clicking/focusing on the input, the background color of input will become orange:

1 5. Attribute selector

Let us understand what is attribute and what are their values by the following example:
HTML code:

    <div class="link-1">
      <a href="https://www.amazon.in/">Amazon</a>
    </div>
    <div class="link-2">
      <a href="https://twitter.com/?lang=en" target="_self">Twitter/X</a>
    </div>
    <div class="link-3">
      <a href="https://www.facebook.com/" target="_blank">Facebook</a>
    </div>
    <img src="images/phone.png" alt="Image of phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Image of planet">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image of apple" height="300px">

Attribute is the property of a tag or an element. For example, in the HTML code, in the first div tag, class is the attribute of the first div tag and link-1 is the value of class attribute of the first div tag. Inside the first div, in a tag (anchor tag), href is the attribute and amazon.in is the value of href attribute.
In second div, in anchor tag, target is attribute and _self is the value of target attribute.
In first image tag (img tag), src (source) is attribute and images/phone.png is the value of src attribute of first image tag.
alt is attribute and Image of phone is the value of alt attribute of first image tag.
width and height are attributes and 200px and 300px respectively are their values of the first img tag.

href stands for hypertext reference. href attribute specifies the URL of the other webpage that it directs to by displaying it as a clickable link on the webpage.

target attribute specifies where to open the link. If the value of target attribute is self, then the link will open in the same tab. If the value of target attribute is _blank, then the link will open in new tab.

alt attribute means alternate attribute. alt attribute provides alternate information for an image if for some reason that image cannot be displayed.

Attribute selector is used to select an element with a specific attribute.
For example:
CSS code:

body{
    background-color: skyblue;
}

a{
    font-size: xx-large;
}

a[target]{
    color: red;
}

img[width]{
    background-color: darkseagreen;
}

Output:

Color of Twitter/X link and Facebook link turned red because these are anchor tags(a tags) with target attribute. Amazon link does not contain target attribute so it's color does not turn red.

Background color of phone and plant turned dark sea green because these are images with width attribute. Planet and apple image does not contain width attribute, so these images have no background color.

16. Attribute="value" selector

This selector selects an element with specific attribute having specific value.
For example:
HTML code:

    <div class="link-1">
      <a href="https://www.amazon.in/">Amazon</a>
    </div>
    <div class="link-2">
      <a href="https://twitter.com/?lang=en" target="_self">Twitter/X</a>
    </div>
    <div class="link-3">
      <a href="https://www.facebook.com/" target="_blank">Facebook</a>
    </div>
    <img src="images/phone.png" alt="Image of phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Image of planet">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image of apple" width="300px">

CSS code:

body{
    background-color: skyblue;
}

a{
    font-size: xx-large;
}

a[target=_self]{
    color: red;
}

img[width="200px"]{
    background-color: plum;
}

Output:

The color of only that anchor tag (a tag) is red whose target value is _self. Similarly, the background color of only that image is plum whose width is 200px.

17. Attribute|="value" selector

In attribute pipe selector, the first word of any attribute of an element must contain hyphen symbol. Pipe symbol is present on button above enter button. For example:
HTML code:

    <img src="images/phone.png" alt="Image- of phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Image of planet">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image-of apple" width="300px">

Css code:

body{
    background-color: skyblue;
}

img[alt|="Image"]{
    background-color: darkcyan;
}

Output:

The first word of alt attribute of phone image and first word of alt attribute of apple image contains the word Image with hyphen sign (Image-), so the background color of these images turned darkcyan.

18. Attribute^="value" selector

In attribute caret selector, those elements whose specific attribute starts with a specific word (first word) are being targeted. For example:
HTML code:

    <img src="images/phone.png" alt="Image of phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Planet image">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image of apple" width="300px">

CSS code:

body{
    background-color: skyblue;
}

img[alt^="Planet"]{
    background-color: palegreen;
}

Output:

The first word of alt attribute of second image element is Planet, so the background color of only planet is palegreen. Rest all images have no background color.

19. Attribute~="value" selector

In attribute tilde selector, those elements whose specific attribute contains a specific word anywhere in between (it can be the first word or last word or any word in between the value of the attribute) is targeted. For example:
HTML code:

    <img src="images/phone.png" alt="Image Of Phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Image of planet">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image of apple" width="300px">

CSS code:

body{
    background-color: skyblue;
}

img[alt~="of"]{
    background-color: darkkhaki;
}

Output:

The alt attribute of second, third and fourth image element contains the word of, so the background color of planet, plant and apple is darkkhaki. Alt attribute of first image element contains the word Of i.e. its first letter o is capital, so the background color of phone is not darkkhaki.

20. Attribute$="value" selector

In this selector, those elements whose specific attribute's value ends with a specific word (last word) are targeted. For example:
HTML code:

    <div class="link-1">
      <a href="https://www.beautiful.ai/" target="_blank">beautiful.ai</a>
    </div>
    <div class="link-2">
      <a href="https://twitter.com/?lang=en" target="_self">Twitter/X</a>
    </div>
    <div class="link-3">
      <a href="https://www.facebook.com/" target="_blank">Facebook</a>
    </div>
    <div class="link-4">
    <a href="https://avtars.ai/" target="_self">avtar.ai</a>
    </div>
    <img src="images/phone.png" alt="Phone image" width="200px" height="300px">
    <img src="images/planet.png" alt="Planet image">
    <img src="images/plant.png" alt="Plant image" width="300px">
    <img src="images/apple.png" alt="Image of apple" width="300px">

CSS code:

body{
    background-color: skyblue;
}

a{
    font-size: xx-large;
}

a[href$=".ai/"]{
    color: red;
}

img[alt$="apple"]{
    background-color: lightcoral;
}

Output:

The last word of href attribute of first and fourth anchor tag (link-1 and link-4) is .ai/ so the color of beautiful.ai and avtar.ai is red.
Similarly, the last word of alt attribute of fourth image element is apple, so the background color of apple image is lightcoral.

21. Attribute*="value" selector

In attribute star selector, those elements are targeted whose specific attribute's value contains a specific value. For example:
HTML code:

    <img src="images/phone.png" alt="Image of phone" width="200px" height="300px">
    <img src="images/planet.png" alt="Image of planet">
    <img src="images/plant.png" alt="Image of plant" width="300px">
    <img src="images/apple.png" alt="Image of apple" width="300px">

CSS code:

body{
    background-color: skyblue;
}

img[alt*="on"]{
    background-color: slateblue;
}

Output:

The value of alt attribute of first image element is Image of phone and in the spelling of phone, 'on' comes, so the background color of phone is slateblue.

Anurag Sharma's Blog

Anurag Sharma's Blog

Complete in depth guide on CSS selector

Table of contents

1. Universal selector

2. Individual selector

3. Class selector

4. ID Selector

5. Chained Selector

6. Combined Selector

7. Inside an element selector

8. Direct child selector

9. Adjacent sibling selector

10. Subsequent sibling selector

11. Pseudo selector ::before

12. Pseudo selector :: after

13. Pseudo selector :hover

14. Pseudo selector :focus

1 5. Attribute selector

16. Attribute="value" selector

17. Attribute|="value" selector

18. Attribute^="value" selector

19. Attribute~="value" selector

20. Attribute$="value" selector

21. Attribute*="value" selector