• The “font-weight” property designates the thickness of the element’s font.
• The “color” property fixes the font’s color.

Using these ways, you can select elements having certain text to style in CSS.

Conclusion

To select the elements containing certain text, the CSS “attribute selectors” and “general sibling combinator selector” can be used. The attribute selectors specify the attribute name of the element and its value. Then, declare the CSS properties for it. The general sibling combinator selector selects every element that is followed by the previous selector. This article has demonstrated the ways to select elements in CSS having certain text.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.

Источник

Is there any selector for elements containing certain text in CSS?

In CSS, selectors are used to select an HTML element to style. There are various CSS selectors available in CSS, such as class selector, id selector, name selector, etc.

Sometimes, developers need to select an HTML element based on the custom attribute value instead of selecting it based on the class name or id. We can use the attribute-value CSS selector to select the HTML element based on the particular attribute value. We can also add the custom attribute instead of only pre-defined attributes in HTML.

Syntax

Users can follow the syntax below to use the attribute-value CSS selector to select elements containing certain text.

[attribute name="attribute value"] < /* CSS code */ >

In the above syntax, the attribute name can be the name of the attribute that HTML element contains, and you want to select an element based on attribute value. The attribute value is a value of the particular attribute.

Example 1

We have created the ‘social’ div element in the example below. In the div element, we have added the child div elements containing the ‘app_name’ attribute and its value. In CSS, we used the ‘app_name’ as an attribute name and different values to select different div elements.

In the output, users can observe that it has styled the div elements containing the ‘Facebook’ and ‘Instagram’ attribute value.

   [app_name="facebook"] < background-color: #3b5998; color: white; >[app_name="instagram"]  
Using the [attribute=value] CSS selector to target an element based on its attribute value
 
 
facebook
 
twitter
 
instagram
 
youtube
 
   

Example 2

In the example below, we have used the attribute-value selector, but we have used the ‘~’ sign for the partial selector. It selects the HTML element, even if the attribute contains a particular word in a value, rather than matching the whole word in the first example.

We used the ‘app’ word in the attribute-value CSS selector here. So, it will select all HTML elements whose type attribute contains the ‘app’ word. The output shows that it has styled the first three div elements as it contains the app word.

   [type~="app"]  
Using the [attribute~=value] CSS selector to target an element based on its attribute value
 
 
Web application
 
Mobile application
 
Desktop application
 
Anroid device
 
   

Example 3

We used the ‘^’ sign with the attribute-value CSS selector in the example below. It allows the selection of all elements whose attribute value starts with a particular word.

Here, we have created the div elements with different class names. In CSS, we use the attribute-value selector to select all HTML elements whose class name starts with the ‘a’ character.

   [class ^="a"]  
Using the [attribute*=value] CSS selector to target an element based on its attribute value
 
 
ABC
 
ADE
 
BCD
 
CDE
 
   

Example 4

In the example below, we created the table containing the snack’s name, expiry date, and price. Also, we added a status equal to expired for the expired snacks. We selected the ‘expired’ snacks in CSS and styled them using the attribute-value CSS selector.

   td[status*=expired]  
Using the [attribute*=value] CSS selector to target an element based on its attribute value
 
 
 
Snack
 
Expiry
 
Price
 
 
 
Chips
 
01/01/2024
 
20 INR
 
 
 
Chocolate
 
01/09/2023
 
30 INR
 
 
 
Candy
 
01/01/2022
 
25 INR
 
 
   

Users learned to select an HTML element based on a certain text. We can add custom attributes to the HTML element, and after that, we can use the attribute-value CSS selector to select elements based on the attribute value.

Источник

How to select HTML elements by text using CSS Selectors?

There used to be a way to select HTML elements by text using CSS Selectors by making use of :contains(text) . However, this has been deprecated for a long time and is no longer supported by the W3C standard. If you want to select an element by text, you should look into other options. Most Python libraries provide a way for you to do so.

For instance, you can select an element by text using XPath Selectors in Selenium like this:

from selenium import webdriver from selenium.webdriver.common.by import By DRIVER_PATH = '/path/to/chromedriver' driver = webdriver.Chrome(executable_path=DRIVER_PATH) # Open Scrapingbee's website driver.get("https://www.scrapingbee.com") # Match the h1 tag that contains the word "Tired" h1 = driver.find_element(By.XPATH, "//h1[contains(text(), 'Tired')]") 

Alternatively, if you are using BeautifulSoup then you can do something like this:

import re import requests from bs4 import BeautifulSoup # Open Scrapingbee's website html = requests.get("https://scrapingbee.com").text soup = BeautifulSoup(html) # Match the h1 tag that contains the word "Tired" h1 = soup.find("h1", text=re.compile("Tired")) print(h1) # Output: 
 

Источник