marcamillion marcamillion - 2 months ago 8
CSS Question

How do I select only 1 specific dom element that has no class or ID AFTER another specific one?

This is what my HTML looks like (fun...I know):

<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>


What I want to select individually are the state span and the zipcode span...aka

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


And

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


Given that the span right before it has a class:

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


And the ones I am interested in have neither a
class
or an
id
, how do I select both of those individually?

Answer

You can use an Attribute Selector:

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