CSS selector selects content containing the specified content
CSS Selectors: Selecting Elements Containing Specific Content
In CSS, selectors are used to select HTML elements and apply style settings to them. In actual development, we sometimes need to select elements that contain specific content, requiring specialized selectors. This article details how to use CSS selectors to select elements that contain specific content and provides sample code.
1. Universal Selector
The universal selector * can select all elements on a page, but it cannot select elements that contain specific content. Here is a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal selector example</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>geek-docs.com</div>
<p>This is a paragraph</p>
</body>
</html>
Output:
In the example above, the universal selector * selects all elements on the page and sets their text color to red. However, it does not select elements with specific content.
2. Class Selectors
The class selector .classname selects elements with a specific class name, but it does not select elements with specific content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div class="highlight">This is a highlighted div</div>
<p>geek-docs.com</p>
</body>
</html>
Output:
In the example above, the class selector .highlight selects elements with the class highlight and sets their background color to yellow. However, it doesn’t select elements that contain specific content.
3. ID Selector
The ID selector #idname can select an element with a specified ID, but cannot select an element containing specified content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Selector Example</title>
<style>
#content {
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">geek-docs.com</div>
<p>This is a paragraph</p>
</body>
</html>
Output:
In the example above, the ID selector #content selects elements with the ID content and makes their font bold. However, it does not select elements that contain the specified content.
4. Attribute Selectors
The attribute selector [attribute=value] selects elements with a specified attribute value, but it does not select elements that contain the specified content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute Selector Example</title>
<style>
[data-text="geek-docs.com"] {
color: blue;
}
</style>
</head>
<body>
<div data-text="geek-docs.com">This is a div containing the specified content</div>
<p>This is a paragraph</p>
</body>
</html>
Output:
In the example above, the attribute selector [data-text="geek-docs.com"] selects elements with the attribute value data-text="geek-docs.com" and sets their text color to blue. However, it does not select elements that contain specified content.
5. Substring Value Selector
The substring value selector [attribute*=value] selects elements whose attribute values contain a specified substring. This selector allows you to select elements that contain specific content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Substring Value Selector Example</title>
<style>
[data-text*="geek-docs.com"] {
background-color: pink;
}
</style>
</head>
<body>
<div data-text="geek-docs.com">This is a div containing the specified content</div>
<p>geek-docs.com</p>
</body>
</html>
Output:
In the example above, the substring value selector [data-text*="geek-docs.com"] selects elements whose data-text attribute value contains the substring geek-docs.com and sets their background color to pink. This selects elements containing the specified content.
6. End Substring Value Selector
The end substring value selector [attribute$=value] selects elements whose attribute values end with a specified substring. This selector can also be used to select elements that contain specific content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>End Substring Value Selector Example</title>
<style>
[data-text$="geek-docs.com"] {
font-style: italic;
}
</style>
</head>
<body>
<div data-text="geek-docs.com">This is a div containing the specified content</div>
<p>This is a paragraph geek-docs.com</p>
</body>
</html>
Output:
In the example above, the ending substring value selector [data-text$="geek-docs.com"] selects elements with a data-text attribute value ending with geek-docs.com and sets their font style to italic. This selects elements containing the specified content.
7. Start Substring Value Selector
The start substring value selector [attribute^=value] selects elements whose attribute values begin with a specified substring. This selector can also be used to select elements that contain specific content. Here’s a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Substring Value Selector Example</title>
<style>
[data-text^="geek-docs.com"] {
text-decoration: underline;
}
</style>
</head>
<body>
<div data-text="geek-docs.com">This is a div containing the specified content</div>
<p>geek-docs.com It's a website.</p>
</body>
</html>
Output:
In the example above, the start substring selector [data-text^="geek-docs.com"] selects elements with a data-text attribute value starting with geek-docs.com and sets their text underline style to underline. This selects elements containing the specified content.
8. Pseudo-class Selectors
Pseudo-class selectors can select specific states or positions of elements. Certain pseudo-class selectors can also be used to select elements containing specific content. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class selector example</title>
<style>
p:contains("geek-docs.com") {
color: green;
}
</style>
</head>
<body>
<div>This is a div</div>
<p>geek-docs.com It's a website.</p>
</body>
</html>
Output:
In the example above, the pseudo-class selector p:contains("geek-docs.com") selects p elements that contain the content of geek-docs.com and sets their text color to green. This selects elements that contain specific content.
9. Conclusion
Through this article, we learned how to use CSS selectors to select elements that contain specific content. In addition to the common class, ID, and attribute selectors, you can also use substring value selectors, end substring value selectors, start substring value selectors, and pseudo-class selectors to achieve this goal. In actual development, choosing the appropriate selector to implement styling based on specific needs can make the page more flexible and beautiful.