css show separator icon for icons


Tags: html,css

Problem :

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... enter image description here

My Css file is

.Container > *:first-child::before,
.Container > *::after 
{
    display: inline-block;
    content: url('../Content/Images/Line.png');
}
  1. All my icons, buttons(with Cancel text) are inside container div

  2. 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');
}


Solution :

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.


    CSS Howto..

    How to make background image position stay same on all resolutions?

    CSS: how can I make this table fit the border when resized?

    How to scope efficiently javascript et css on a rails appliacation?

    how to decrease space between headings?

    How to set background color in border in CSS

    How to justify short text inside fill fixed width parent with CSS?

    CSS How to Properly use ems instead of pixels?

    gulp-cssmin: How to change relative URLs in minified CSS

    How to get my app to fill the full height on mobile?

    How to make fonts display on web cross-platform?

    How do I position divs inside header?

    How to align horizontally nav bar in css?

    How to make an element match the height of a dynamic page

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    how to stop CSS hyphenation, no dash between words

    how to flip the div using css?

    AngularJS: How to unselect a span when selecting another

    how to position nested list items?

    How can I render country flags as a ribbon, using CSS only?

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    CSS: How to fake a :hover state?

    How should I escape image URLs for CSS?

    How can I stop this ugly font smoothing with custom fonts in CSS?

    How can I apply a CSS modification with a button [closed]

    How to make a div to represent a dotted line?

    This panel keeps getting position: absolute applied. How can I stop it?

    How to fix incorrect element size on browser scaling?

    how to add a fixed position Box on left side of each post [closed]

    How can I make my div to remain fixed and no longer change position?

    how to keep conditional CSS statements for internet explorer in Express (Node.js) template