How could I use pseudo-element :after :before conditionally


Tags: html,css,css-selectors

Problem :

If I wanted to only insert a pseudo-element after a link only if the link is followed by another element say ul. How could I do this?

Example:

<ul>
    <li>
        <a href="#">blah<!-- insert -> here with CSS --></a>
        <ul>
            <li>More stuff</li>
        </ul>
    </li>
    <li>
        <a href="#">blah 2<!--Do nothing here--></a>
    </li>
</ul>

CSS I wish could happen:

ul li a:after if(next:ul) {
   content:"->";
}

I'm not trying to use JavaScript/jQuery. And I realize if conditions are not apart of css. Is there a way to do this?



Solution :

In general it is not possible to select elements based on their next sibling.

In your specific case, you can use ul li a:not(:last-child)::after, because it happens that your anchors that are not followed by an <ul> element are also the last child element.


    CSS Howto..

    Intellij IDEA 11: how can I compile .css from .less?

    Compiling Bootstrap in LESS - How can I have a different navbar height for mobile?

    How I can write CSS for IE. My code not work in IE10 nor 9,7,8?

    How to position a scroll box on top of an image using only inline CSS

    How to keep Fixed position navigation static positioned when resizing window

    Bootstrap: how to stack divs of different heights?

    WordPress admin stylesheet not showing images

    How to include .otf in css?

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    CSS newbie: How to align my link to the right side of the page?

    How to change transparency of background image using javascript?

    How do I add curved corners to menu in css

    jquery how to add image from computer

    How to add another text decoration definition with Javascript?

    How to make selected file name visible?

    How to make half-square background in css

    How to include php page which include also a css file?

    How to make read more option with html/CSS?

    How to override default css style rule of Bootstrap

    CSS media query height greater than width and visa versa (or how to imitate with JavaScript)

    How do I put several elements on the second row in a div

    How to hide elements in navbar until hover in css?

    How to change the location of my yt video ( I want to move it approximately 10 cm down and 10cm to the right so that it doesnt clash)

    How do I get my menu to drop down? CSS & HTML

    How to center list of links in a straight line. CSS

    How to organise my web content?

    How to get a property from other class in CSS?

    How to change the background color of a non selected cell in JavaFx 8 table view

    How to deselect with CSS?

    How to wrap entire line with overline and underline , until the end of the line ?