html - How to put padding on SPAN only when not empty -

html - How to put padding on SPAN only when not empty -

i have next html source:

<span id="ctl00_sitemap1" class="breadcrumb hidoverflow"> <span> <a title="homepage" href="/default.aspx">home</a> </span> <span></span> <span> <a title="basic reporting samples" href="/find_provider.aspx">provider</a> </span> <span></span> <span>profile</span> </span>

the next css:

.breacrumb { font: 10px 'verdana', 'graduate', 'arial', 'helvetica', 'sans-serif'; height: 30px; line-height: 30px; color: #9b9b9b; width: 100%; overflow: hidden; font-weight: bold; } .breadcrumb li { list-style-type: none; float: left; font-weight: bold; } .breadcrumb { height: 30px; line-height: 30px; display: inline-block; background-image: url('../theimages/breadcrumbarrow.png'); background-repeat: no-repeat; background-position: right; padding-right: 15px; text-decoration: none; color: #454545; font-weight: bold; } .breadcrumb span a:not(:first-child) { padding-left: 15px; }

output:

how can modify css following:

add status along .breadcrumb span a:not(:first-child) each span after have padding: 15px (e.g. provider , profile) , not empty span in between. make lastly non-empty span (profile) color #cccccc.

updated css adds padding 3 texts:

.breadcrumb span:first-child { padding-left: 0; } .breadcrumb span:not(:empty) { padding-left: 15px; }

for finish solution

you need

kill padding on first anchor

.breadcrumb span:first-child { padding-left: 0; }

add padding non empty spans

.breadcrumb span:not(:empty) { padding-left: 15px; }

since first span not empty, need kill padding first span

.breadcrumb span:first-child { padding-left: 0; }

html css