CSS, когда определенный текст между тегами

Question

Скажем, у меня есть этот HTML:

<p class="test">foo</p> 

<p class="test">bar</p> 

Есть ли способ, что я могу сделать это только выбрать первую строку. Таким образом, css будет что-то вроде строк

.test:(text="foo") { 

} 

но только с использованием css?

Редактировать: К сожалению, это не может быть сделано с чистым css.

благодарит любом случае

Answer 1

* EDIT: Вопрос-Аскер не хочет первого ребенка, и вместо этого хочет, чтобы это было основано на нитке, которую вы не можете сделать с чистого CSS. Следующий ответ для осуществления первого ребенка *

Этот ответ для первого ребенка:

Если это только когда-либо будет первым вам нужно: первый-ребенок псевдо-элемент.

Существует также последний ребенок и п-й ребенок, но: во-первых, ребенок тот, который безопасен для использования в IE8 и ранее, но вы должны иметь доктайп:

http://www.w3schools.com/cssref/sel_firstchild.asp

http://quirksmode.org/css/selectors/firstchild.html

Что вам нужно сделать, это что-то вроде этого:

p:first-child { 
    /* CSS Styles */ 
} 

Вот скрипка с она работает:

http://jsfiddle.net/shayl/KwWjt/

Answer 2

Если у вас есть несколько элементов:

<p class="test">foo</p> 
<p class="test">bar</p> 
<p class="test">zed</p> 

и хотите, чтобы выбрать первый один, то вы можете использовать :first-child селектор:

.test:first-child { 
    color: red; 
} 

• Вы можете проверить jsFiddle demo.

---

Если у вас есть один элемент:

<p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, quis, expedita, illo adipisci voluptates minus labore ex quos aspernatur impedit rerum nam! Officiis quas nam fugiat illum maiores repellat voluptas.</p> 

и хотите выбрать первую строку, то вы можете использовать :first-line селектор:

.test:first-line { 
    color: red; 
} 

• Вы можете проверить jsFiddle demo.

---

Если вы хотите, чтобы выбрать элемент, на основе содержания в нем, это не представляется возможным с помощью CSS, вы должны JavaScript для этого, например, JQuery имеет одну реализацию:

<div>John Resig</div> 
<div>George Martin</div> 
<div>Malcom John Sinclair</div> 
<div>J. Ohn</div> 

<script> 
    $("div:contains('John')").css("text-decoration", "underline"); 
</script> 

• :contains() Selector - Jquery Документация API