Ändern Sie den Hintergrund für das erste Kind mit CSS

Question

Ich habe diese HTML-Markup, die ich aufgrund meines Themas nicht ändern kann.

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

Ich versuche, den Hintergrund für das erste zu entfernen: Kind (das heißt Home-Symbol), aber mit dem Code unter dem Hintergrund in den Brotkrumen für die nachfolgenden Links entfernt.

.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; 
} 

irgendwelche ideen?

Answer 1

Ihr Selektor funktioniert nicht wie erwartet, da alle untergeordneten a Elemente ausgewählt werden, die ein erstes untergeordnetes Element sind.

Sie müssen die direct child selector, > verwenden, um nur das direkte Kind a Element des Elements .x-breadcrumbs zu zielen. Dabei wird nur das erste untergeordnete Element im Element .x-breadcrumbs ausgewählt und nicht alle untergeordneten Elemente, bei denen es sich um das erste untergeordnete Element des übergeordneten Elements handelt.

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