CSS выберите внутри тега

Question

у меня есть этот CSS:

.test1 { 
font-size:10pt; 
} 

.test2 { 
font-size:12pt; 
} 

и у меня есть этот 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> 

, что я должен сделать, это выбрать класс test1, но только теги который содержит «семью» внутри тега и дает фон

Мне нужно решение с css o nly, мне не нужно менять внутри html
это возможно? Спасибо

Answer 1

Если вы используете что-нибудь ниже CSS3 -

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

:contains() псевдо-класс осуждался в CSS3 - эрго я бы не рекомендовал его, и я не совсем положительный любой браузер полностью поддерживает его Этот ответ полностью субъективен.

Редактировать: по-видимомукласс psuedo работает в jQuery (проверен в версии 1.9).

Вы можете использовать jQuery для изменения ваших стилей. (это решение требует только CSS-решения, но если это доступно, используйте его!)

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

Answer 2

Невозможно с чистым CSS. Вы не можете выбрать содержимое элементов с помощью CSS (3 и выше).

только вы можете сделать, это указать какой-то атрибут как:

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

а затем выберите его с помощью CSS:

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

Answer 3

вы можете использовать несколько классов что-то вроде этого,

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

и код HTML,

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

Answer 4

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

Я хотел бы предложить этот в orther для предотвращения Переопределить

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