Как выбрать тег с текстом между тегом и его родительским тегом?

Question

Как я могу различить, используя CSS, между тегом, который, если бы он и его содержимое были удалены, оставили бы свой родительский тег пустым? Я действительно не хочу его удалять, я просто хочу рассматривать его по-другому.

Например, при следующем примере кода:

<div><a>test one</a></div> 
<div>My <a>test two</a></div> 
<div>My <a>test three</a> and <a>test four</a> text</div> 
<div><a>Test five</a> text</div> 
<div>My <a>test six</a> text</div> 

Следующий CSS:

a:only-child { color: #668899; } 

выбирает для всех, но тесты три и четыре.

a:not(only-child) { color: #668899; } 

выбирает для всех, но я бы ожидать, что выбрать только тесты три и четыре.

Как выбрать все тесты за исключением проверить один, используя только CSS?

Если я не могу стилизовать только тесты с двух до шести с помощью только CSS, могу ли я имитировать их с помощью jQuery? Если да, то как?

Answer 1

Это, вероятно, не самое эффективное решение, но оно работает - сравните текстовое содержимое каждого элемента <a> с текстовым содержимым его родителя. Если они совпадают, то применить другой стиль:

$('div a').each(function(){ 
 
    if ($(this).text()===$(this).parent().text()) { 
 
    $(this).addClass('onlyChild'); 
 
    } 
 
});

.onlyChild { color: #668899; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><a>test one</a></div> 
 
<div>My <a>test two</a></div> 
 
<div>My <a>test three</a> and <a>test four</a> text</div> 
 
<div><a>Test five</a> text</div> 
 
<div>My <a>test six</a> text</div>

Answer 2

Прямо сейчас ваше правило ищет элемент, называемый only-child

Используйте это правило выбора

a:not(:only-child) { color: #668899; }

Образец демонстрации

a:not(:only-child) { color: red; }

<div><a>test one</a></div> 
 
<div>My <a>test two</a></div> 
 
<div>My <a>test three</a> and <a>test four</a> text</div> 
 
<div><a>Test five</a> text</div> 
 
<div>My <a>test six</a> text</div>