CODEWITHSUNDEEP
htmlcss
user1000744
user1000744

Reputation: 123

css select inside tag

i have this css: 

.test1 {
font-size:10pt;
}

.test2 {
font-size:12pt;
}

and i have this html :

<div class='test1'>name</div>
<div class='test2'>desc_name</div>


<div class='test1'>family</div>
<div class='test2'>desc_family</div>


<div class='test1'>password</div>
<div class='test2'>desc_pass</div>

what i have to do is to select the class test1 but only the tags that contains "family" inside the tag and give a background


i need a solution with css only, i dont need to change inside the html
is it possible ? Thank You

Upvotes: 1

Views: 1314

Answers (4)

zEn feeLo
zEn feeLo

Reputation: 1978

    <div class='test1 family'>family</div>
    <div class='test2'>desc_family</div>

I would suggest this one in orther to prevent override

    .test1 {
    font-size:10pt;
    }
    .test2 {
    font-size:12pt;
    }
    .test1.family {
    /* style */
    }

Upvotes: 0

ddavison
ddavison

Reputation: 29032

If you are using anything below CSS3 -

div.test1:contains("family") {
  background: *;
}

The :contains() pseudo-class was deprecated in CSS3 - ergo i wouldn't recommend it, nor am I entirely positive any browser completely supports it.. This answer is entirely subjective.

Edit: apparently the :contains() psuedo class works in jQuery (tested in v 1.9).

You can use jQuery to change your styles. (this solution calls for a CSS only solution, but if this is available, use it!)

$("div.test1:contains('family')").css({ background: "whatever" });

Upvotes: 1

Bhavesh G
Bhavesh G

Reputation: 3028

you can use multiple class something like this,

.test1 {
font-size:10pt;
}
.test2 {
font-size:12pt;
}
.family {
/* style */
}

and HTML code,

<div class='test1 family'>family</div>
<div class='test2'>desc_family</div>

Upvotes: 0

bwoebi
bwoebi

Reputation: 23777

Impossible with pure CSS. You cannot select on elements content with CSS(3 and higher).

The only you can do is specifying some attribute like:

<div class='test1' data-value="family">family</div>

And then select it with CSS:

div.test1[data-value='family'] { /* ... */ }

Upvotes: 3

Related Questions