CSSを使用して最初の子供の背景を変更します

Question

私は私のテーマのために私が変更できないこのhtmlマークアップを持っています。

<div class="x-breadcrumb-wrap"> 
    <div class="x-container max width"> 
    <div class="x-breadcrumbs"><a href="https://www.domain.com"><span class="home"><i class="x-icon-home" data-x-icon="&#xf015;"></i></span></a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span> <a href="/guides/">Guides</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span>  <span class="current"><a href="/guides/my-guide/"> london</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span> <span class="current"><a href="/guides/my-guide/stays">Stays</a> <span class="delimiter"><i class="x-icon-angle-right" data-x-icon="&#xf105;"></i></span>  <span class="current">Venue</span></div> 
    </div> 
</div> 

私は最初の背景を削除しようとしています：子（すなわち、ホームアイコン）が、背景以下のコードを使用してはパン粉で、後続のリンクのために削除されます。

.x-breadcrumb-wrap a { 
    color: #ffffff !important; 
    background: #2b2b2b; 
    padding: 1px 6px 1px 6px; 
    text-shadow: none !important; 
    letter-spacing: 0.13em; 
    border-radius: 3px; 
} 

.x-breadcrumb-wrap a:first-child { 
    background: transparent; 
} 

Answer 1

セレクタが最初の子である子孫a要素のすべてを選択しているため、期待通りに機能しません。

要素の直接の子a要素のみをターゲットにするには、direct child selector, >を使用する必要があります。そうすることで、親エレメントの最初の子であるすべての子孫エレメントではなく、.x-breadcrumbsエレメントの最初の子だけが選択されます。

.x-breadcrumb-wrap .x-breadcrumbs > a:first-child { 
    background: transparent; 
}