Есть ли способ: first-of-type :: first-letter, кроме случаев, когда элемент имеет родителя данного типа? - PullRequest
Новая
       4

Есть ли способ: first-of-type :: first-letter, кроме случаев, когда элемент имеет родителя данного типа?

1 голос
/ 05 марта 2020

У меня есть следующий код TypeScript React. 

const Container = styled.div`
  p:first-of-type::first-letter {
    font-size: 4rem;
    line-height: 2rem;
    margin-top: 1rem;
    margin-right: 1rem;
    text-transform: uppercase;
    display: block;
    float: left;
    @media only screen and (max-width: ${breakpoints.s}px) {
      font-size: 3.2rem;
      line-height: 1.6rem;
      margin-right: 0.8rem;
    }
  }
}

Я бы хотел p:first-of-type::first-letter применить, если p не является потомком blockquote.

Ответы [ 2 ]

2 голосов
/ 05 марта 2020

Если вы имеете в виду, что это не должно применяться, если p является прямым потомком blockquote, вы можете использовать эту комбинацию селекторов: 

*:not(blockquote) > p:first-of-type::first-letter

ИЛИ, для простого CSS также (но, по-видимому, не , работающий в styleled-компоненты - см. комментарии): 

:not(blockquote) > p:first-of-type::first-letter

(без универсального селектора, который не обязательно необходимо, но делает его немного легче для понимания)

Прямой родительский элемент может быть чем угодно, кроме цитаты таким образом. Вот фрагмент: 

*:not(blockquote)>p:first-of-type::first-letter {
  font-size: 4rem;
  line-height: 2rem;
  margin-top: 1rem;
  margin-right: 1rem;
  text-transform: uppercase;
  display: block;
  float: left;
  @media only screen and (max-width: $ {
    breakpoints.s
  }
  px) {
    font-size: 3.2rem;
    line-height: 1.6rem;
    margin-right: 0.8rem;
  }
}
<body>
  <p>Test regular paragraph tag</p>
  <blockquote>
    <p>Test paragraph tag as child of blockquote</p>
  </blockquote>
</body>
1 голос
/ 05 марта 2020

обновленный ответ

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

*:not(blockquote) > p:first-of-type::first-letter {
  font-size: inherit;
}

оригинальный ответ

Вы можете создать дополнительное правило для цели, если оно действительно является потомком blockquote, и переопределить это. 

blockquote p:first-of-type::first-letter {
  font-size: inherit;
}

Демо 

blockquote p:first-of-type::first-letter {
  font-size: inherit;
}

p:first-of-type::first-letter {
  font-size: 4rem;
}
<p>this is some affected &lt;p&gt; element</p>
<hr/>
<blockquote>
<p>this is not affected</p>
</blockquote>
...