Целевой псевдоэлемент первого ребенка - PullRequest
Новая
       25

Целевой псевдоэлемент первого ребенка

0 голосов
/ 04 декабря 2018

Я пытаюсь нацелить псевдоэлемент, который я использую, чтобы изменить ширину границы.

Я пытаюсь избавиться от верхней границы (первый ребенок)

Но это не работает.Вы нацелены на псевдоэлемент? 

<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
 }
:first-child {
  ::before {
    border-top:none;
  }

Вот ручка: https://codepen.io/tysonmaynes/pen/JeVrLr

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

Кроме того, вы можете использовать псевдокласс отрицание 

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.landingHeaderNav a:not(:first-child)::before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
}
<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>
0 голосов
/ 04 декабря 2018

В css необходимо использовать, как указано ниже, установить элемент перед псевдо как .landingHeaderNav a:before: 

.landingHeaderNav a {
  color: #000;
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}
.landingHeaderNav a:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 5%;
  border-top: 1px solid #000;
 }
.landingHeaderNav a:first-child::before {
    border-top:none;
  }
<div class="landingHeaderNav">
  <a href="#">Click here</a>
  <a href="#">Click here</a>
  <a href="#">Click here</a>
</div>

При использовании sass или s css: 

    .landingHeaderNav a {
      color: #000;
      display: block;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
   &:before {
      content: "";
      display: block;
      margin: 0 auto;
      width: 5%;
      border-top: 1px solid #000;
     }

    &:first-child::before {
        border-top:none;
      }
}
...