How to hide first pseudo css element

问题: Is it possible to hide the first pseudo element? <div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> <div class="custom-condition">AND&l...

问题:

Is it possible to hide the first pseudo element?

<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>

this html element has a pseudo styling like this:

.custom-condition::before {
   content: '';
   position: absolute;
   width: 1px;
   height: auto;
   min-height: 25px;
   border: 2px solid #f1f1f1;
   top: -25px;
   left: 50%;
   margin-left: -2px;
}

It is not possible to do something like this?

.custom-condition:first-child::before {
   content: '';
}

Also tried to added a span element to avoid the psuedo element like this:

<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
   <div class="smallLine"></div>
</div>

Just copied the psuedo styling to the .smallLine


回答1:

If all the elements are inside the same wrapper you can do this. Instead of removing the pseudo-element from the first simply define it for all the other but not the first.

.custom-condition ~ .custom-condition::before {
  content: '[Before]';
}
<div>
  <div> OR </div>
  <div class="custom-condition"> AND </div>
  <div class="custom-condition"> AND </div>
  <div> OR </div>
  <div class="custom-condition"> AND </div>
</div>

UDPATE

You can consider the parent element with your current HTML structure

.rule-container ~ .rule-container .custom-condition::before {
  content: '[Before]';
}
<div id="builder-widgets_rule_0" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_1" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>
<div id="builder-widgets_rule_2" class="ruleTemplate rule-container"> 
   <div class="custom-condition">AND</div>
</div>

  • 发表于 2018-09-01 06:37
  • 阅读 ( 244 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除