Styling text within a div similar to links - css

Question

I have the following breadcrumb code.
#breadcrumb{
margin-bottom: 10px;
margin-top: 10px;
display: block;}
#breadcrumb a{background:#FFFFFF;
padding:4px;
margin-right:10px;}
<div id="breadcrumb">
HomeParent CatagoryChild Catagory
</div>
I have styled the 'Home' and 'Parent Catagory' links to have solid colour backgrounds. I would like to style the 'Child Catagory' text with a slightly different colour solid background from the two links. All three elements of the breadcrumb should have gaps between them and should not be touching.
The 'Child Catagory' text is not surrounded by <span> so I am unsure how to achieve this.
If I add styling to the surrounding 'breadcrumb' div, the space between the links is affected.
I need to style just the text in the 'breadcrumb' div, not the div itself and not the links.

Answer 1

This is a terrible hacky approach and should not be used. I strongly recommend wrapping the last bit of the breadcrumb in a span and styling the span.
#breadcrumb {
background:red;
display:inline-block;
}
#breadcrumb a {
background:green;
display:inline-block;
position:relative;
}
#breadcrumb a:after {
content: "";
background: white;
height: 1.5em;
position: absolute;
top: 0;
right: -5px;
width: 5px;
}
<div id="breadcrumb">
Home
Parent Catagory
Child Catagory
</div>
Edit
If you know the width of the last element, you can do the following:
#breadcrumb:after {
background: red;
content: "";
height: 1.5em;
width: 99px;
display: inline-block;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#breadcrumb {
overflow: hidden;
display: inline-block;
position: relative;
margin-bottom: 10px;
margin-top: 10px;
}
#breadcrumb a{
background:#ccc;
padding:4px;
margin-right:10px;
}
<div id="breadcrumb">
HomeParent CatagoryChild Catagory
</div>

Answer 2

Option 1 - Edit the HTML
The question is: Can you edit the HTML?
The best thing to do would be to edit the HTML and add a surrounding div to the "Child Category" item, then style it.
<div id="breadcrumb">
Home
Parent Catagory
<div class="child">Child Category</div>
</div>
SCSS
#breadcrumb{
a,
.child{
background: #f5f5f5;
padding: 4px 7px;
margin: 0 5px;
&:first-child {
margin-left: 0;
}
}
.child{
display: inline-block;
background: #222;
color: #fff;
}
}
CSS Output
#breadcrumb a, #breadcrumb .child {
background: #f5f5f5;
padding: 4px 7px;
margin: 0 5px;
}
#breadcrumb a:first-child, #breadcrumb .child:first-child {
margin-left: 0;
}
#breadcrumb .child {
display: inline-block;
background: #222;
color: #fff;
}
Example:
http://codepen.io/anon/pen/vEaPqx
Option 2 -- Javascript workaround
Of course there are other ways using javascript like getting the value from another div and appending it to the breadcrumb div. The issue is that this is could eventually break if the HTML changes. It also depends on the content already on the page.
<div id="existing-child-category-text">Child Category</div>
<div id="breadcrumb">
Home
Parent Catagory
</div>
Javascript:
// Create the child element
var child_cat = document.createElement('div');
// Add a class name to the child element
child_cat.className = 'child';
// Add the text from the existing child category to the child div
child_cat.innerHTML = document.getElementById('existing-child-category-text').innerHTML;
// Add the new div to the breadcrumbs
document.getElementById('breadcrumb').appendChild(child_cat);
Example:
http://codepen.io/anon/pen/vEaPqx
Ultimately I would assume that if you are able to edit javascript then you could also change the HTML which would be a way more robust solution.
Option 3 -- Use Pseudo Elements
Try to avoid this but you could have a similar approach using css pseudo elements. but you would need to set the value via javascript or hardcode the value on css which is not the best solution.