CSS :before and :first-child combined

前端 未结 2 546
盖世英雄少女心
盖世英雄少女心 2021-02-11 12:09

I\'m using the following code to add separators between my menu items:

#navigation_center li:before {

    content: \"| \";
    color: #fff;

}

相关标签:
2条回答
  • 2021-02-11 12:20

    Try

    #navigation_center li:first-child:before {
        content: '';
    }
    

    Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first which is not a valid CSS selector. Instead, use :first-child. Also the order of the pseudo-selectors is important. The first child selector must come first.

    I tend to think of :before as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.

    0 讨论(0)
  • 2021-02-11 12:21

    Although hradac's answer should do the trick i thought it would be best to run through some possible permutations to help newcommers.

    .works:first-child:before
    {
    	color: green;
    	content: 'working ';
    }
    .works:not(:first-child):after
    {
    	color: green;
    	content: ' is working';
    }
    
    
    .broken:before:first-child
    {
    	color: red;
    	content: 'this will never show up';
    }
    .broken:after:not(:first-child)
    {
    	color: red;
    	content: 'and this will not show up either';
    }
    works:
    <div>
    	<div class='works'>
    	 something
    	</div>
    	<div class='works'>
    	 something
    	</div>
    	<div class='works'>
    	 something
    	</div>
    </div>
    <hr/>
    broken:
    <div>
    	<div class='broken'>
    	 something
    	</div>
    	<div class='broken'>
    	 something
    	</div>
    	<div class='broken'>
    	 something
    	</div>
    </div>

    Let's take this apart:

    • Three div.works are inside a div
    • Three div.broken are also inside a div
    • The first rule of CSS adds a green text "working " before. It does so by selecting the first-child and then selecting the empty space right before it.
    • The second rule adds " is working" after each block that comes after first, by analogy it first selects each block that doesn't fall under the first-child definition, and then selects the empty space before them.
    • The following two rules, will not find a block to attack themselves to. The :before:first-child attempts to select an empty space, but then tests if it is a first-child and it is not (since technically it's not yet in the DOM tree), the similar problem is with :not(:first-child).
    0 讨论(0)
提交回复
热议问题