Css selector to identify a div element by text

Question

<div>
<dl class="abc">
<dt>
<div>A</div>
</dt>
<dd style="display:none;">
<dt>
<div>B</div>
</dt>
<dd style="display: none;">

How do i uniquely identify div element with text 'A' using CSS selectors?(Read that one way to do is by using :contains() that is deprecated in CSS3)

This is not possible in CSS3. Consider adding a class to the required div — singe3, Aug 04 '14 at 09:33
As far as I know, it isn't possible. Use classes or id's instead, or use an element selector if you specifically know which div it is. — Pieter VDE, Aug 04 '14 at 09:33
You could add a class for every text. Otherwise you will have to use javascript. — Jerodev, Aug 04 '14 at 09:35
You might want to read this http://stackoverflow.com/questions/5441680/css-selector-based-on-element-text — naota, Aug 04 '14 at 09:41

score 0 · Answer 1 · answered Aug 04 '14 at 09:39

Selecting an element by its content using pure CSS isn't possible as far as I know.

You can do some other things:

1. Add a class

<div>
    <dl class="abc"> 
        <dt class="a">A</dt>
        <dd style="display: none;"></dd> <dt>B</dt>
        <dd style="display: none;"></dd>
    </dl>
</div>

So you can use the following selector:

.a {
    /* CSS code here */
}

2. Add an id

<div>
    <dl class="abc"> 
        <dt id="a">A</dt>
        <dd style="display: none;"></dd> <dt>B</dt>
        <dd style="display: none;"></dd>
    </dl>
</div>

So you can use the following selector:

#id {
    /* CSS code here */
}

You can only use one ID per page, so this would be best if you want to be sure only this element is selected.

3. Select by DOM structure

<div>
    <dl class="abc"> 
        <dt>A</dt>
        <dd style="display: none;"></dd> <dt>B</dt>
        <dd style="display: none;"></dd>
    </dl>
</div>

Selector:

div > dl > dt {
    /* CSS code here */
}

These would all work, you should pick which one suits your needs.

Css selector to identify a div element by text

1 Answers1