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.
border
s …? – CBroe Jun 25 '14 at 21:51