Is There a CSS Selector for Elements Containing Certain Text?

The CSS selectors select the HTML elements to apply styling properties. These are utilized to find the elements which you want to style. There are certain categories of CSS selectors, such as pseudo-class, simple selectors, and others. More specifically, the attribute selector is the best option for selecting the element having definite text. The combinator selector can also be applied for this purpose.

This article will demonstrate the following methods:

• Method 1: Selecting Element Containing Certain Text Using CSS Attribute Selector
• Method 2: Selecting Element Containing Certain Text Using CSS General Sibling Selector

Method 1: Selecting Element Containing Certain Text Using CSS Attribute Selector

The CSS attribute selector “CSS [attribute~=“value”] Selector” can help to select the element with definite text.

Syntax

Let’s understand the syntax of the CSS attribute selector:

Here:

• “attribute-name”: The attribute used in the HTML element having certain text is specified here.
• “~”: This symbol is a general sibling combinator. It is utilized to choose every element that is a given element’s next sibling.
• “value”: It indicates the attribute value.

Example

In the HTML file, follow the listed instructions:

• First, add the “<div>” element and assign a class “items-div”.
• Add the “<h2>”, “<h4>”, and “<p>” elements within the div.
• The “<h2>” and “<h4>” adjust the headings on the page. The “<h4>” heading is slightly smaller than the “<h2>” element.
• The “<p>” element specifies the text content on the page:

Let’s style the div “items-div” and the heading “<h2>” by applying the CSS properties as mentioned below. After that, we will see how to select the “<p>” element’s text using the CSS attribute selectors.

Style “items-div” class

Following CSS properties are applied to the “items-div” class:

Here:

• “text-align” determines the text alignment.
• “font-size” adjusts the element font size.
• “font-family” picks out the font style of the element.

Style “h2” Element

“h2” is also known as the element selector. It is used to style the “<h2>” element with the following properties:

In the above-code block:

• “letter-spacing” adjusts the spacing between the element’s characters.
• “color” assigns the color to the text.
• “font-size” property is defined in the above section.

Select “book” text

To select a particular text from the document, there is no specific selector. The element’s attribute only needs to be specified. Then, with the help of the attribute value, we can select the text in CSS:

Here, in CSS, the “background-color” property is adjusted to the text by specifying the attribute “stationary” having value “book”.

The below output shows that all the elements having the attribute value “book” are styled:

Now, let’s check the example to apply styles to the “pencil” text. For this purpose, the attribute stationary with the value “pencil” is fetched in CSS through the attribute selector:

Here:

• “background-color” specified the color of the element’s background.
• “padding” assigns space around the element’s content.

Output

Method 2: Selecting Element Containing Certain Text Using CSS General Sibling Selector

There is another method to apply styles on the elements having text. But this method should be utilized when you have multiple “<p>” elements having some text, and you need to style them all at once. To do so, specify the element that is just before the “<p>” elements, then add the general sibling combinator (~) symbol, and mention the element having text to apply styles.

Syntax

Here, is the syntax of the above-mentioned scenario:

Example

Let’s add styling to all “<p>” elements that are direct siblings of the preceded element.

The “h4~p” signifies the “<p>” elements that are direct siblings of the “<h4>” element. The following described properties are added to it:

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

Output

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.