Как выбрать только один конкретный элемент dom, у которого нет класса или идентификатора ПОСЛЕ другого конкретного?

Question

Это то, что мой HTML выглядит (весело ... Я знаю):

<p itemscope="" itemtype="http://schema.org/PostalAddress" itemprop="address" class="adr"> 
    <span itemprop="streetAddress" class="street-address">6306 N Cicero Ave</span> 
    <span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span> 
    <span itemprop="addressRegion">IL</span>&nbsp; 
    <span itemprop="postalCode">60646</span> 
</p> 

То, что я хочу, чтобы выбрать индивидуально, являются государственной службы и пролет почтовый индекс ... ака

<span itemprop="addressRegion">IL</span> 

И

<span itemprop="postalCode">60646</span> 

Учитывая, что продолжительность перед ним имеет класс:

<span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span> 

И те, которые меня интересуют, не имеют ни class, ни id, как я могу выбрать их обоих?

Answer 1

Вы можете использовать Attribute Selector:

span[itemprop="addressRegion"], span[itemprop="postalCode"] { 
    color: red; 
} 

Answer 2

Вам просто нужно использовать свойство attribute.

https://jsfiddle.net/25euucb0/

[itemprop~=addressRegion] { 
    border: 5px solid yellow; 
} 

[itemprop~=postalCode] { 
    border: 5px solid red; 
} 

Answer 3

Используйте селектор (+), он находит следующий родственный элемент.

EDIT: Просто используйте селектор (~) siblings, проверьте его.

Проверьте это: https://jsfiddle.net/4xzyva6L/

HTML

<p itemscope="" itemtype="http://schema.org/PostalAddress" itemprop="address" class="adr"> 
    <span itemprop="streetAddress" class="street-address">6306 N Cicero Ave</span> 
    <span itemprop="addressLocality" class="locality">Chicago,&nbsp;</span> 
    <span itemprop="addressRegion">IL</span>&nbsp; 
    <span itemprop="postalCode">60646</span> 
</p> 

CSS:

.locality ~ span{ 
    background-color:lime; 
} 

Answer 4

Использование CSS псевдо-класс :not()

Установите селектор атрибута в качестве аргумента в not() селектор что-то вроде span:not([atttribute])

.adr span:not([class]){ 
    background-color:yellow; 
    } 

.adr span:not([class])+span{ 
    background-color:orange; 
} 

Проверить Working Demo