css show separator icon for icons - html

Question

I have a scenario like the below to show a spacer(line) before and after icons(Cross symbols) and not to show spacer(line) before and after buttons(with Cancel text). How can I achieve this...
My Css file is
.Container > *:first-child::before,
.Container > *::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
All my icons, buttons(with Cancel text) are inside container div
Can we restrict showing lines before and after buttons(with Cancel text)?
I tried the below code which did not work.
.Container > *:not(input[type="button"]):first-child::before,
.Container > *:not(input[type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}

Answer 1

Edit:
Assuming demo markup like this:
<div class="container">
<span>x</span>
<span>x</span>
<span>x</span>
<input type="button" value="Cancel" />
<input type="button" value="Cancel" />
<span>x</span>
<span>x</span>
<span>x</span>
</div>
.. you could use the following CSS to acheive what you need:
CSS
.container > *:not([type="button"]):first-child::before,
.container > *:not([type="button"])::after
{
/*content: url('../Content/Images/Line.png');*/
content: ''; /* if line image is used, this is not necessary */
background: #555; /* if line image is used, this is not necessary */
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
margin: 0 8px;
}
FIDDLE
Side note: Instead of using the * selector - you could target the specific child elements, or -even better - add a class name to the child elements
So why didn't your original css - as posted in the question - work?
The :not() pseudo class can only accept a simple selector.
From the spec:
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So although the not pseudo class can accept an attribute selector like: :not([type="button"]), in your code you have combined it with an element selector - ie. input ---- :not(input[type="button"]) - which is why the code doesn't work.
So this will work:
.Container > *:not([type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
..but this won't:
.Container > *:not(input[type="button"])::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
Here is a demo to illustrate this.

Answer 2

If you only want the line before and after the icons, instead of using wildcard * and then trying to deselect buttons, simply target the icons alone. Assuming the icons has class .class
.Container > .icon:first-child::before,
.Container > .icon::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
or if the icons are <img>, corresponding css would be
.Container > img:first-child::before,
.Container > img::after
{
display: inline-block;
content: url('../Content/Images/Line.png');
}
problem solved (can't be more specific since you haven't provided much information).

Answer 3

I think the key to solving your problem is using an adjacent sibling selector. You can select elements by their preceding sibling as follows:
.sibling#one + .sibling#two {
/* style every .sibling#two that is preceded by a .sibling#one */
}
I've made a quick example here, using borders instead of the images with lines and div's as buttons. I hope this will help, good luck!