Приоритет псевдоэлемента

@Aqua77 · Регистрация: 13.07.2015

Author24 — интернет-сервис помощи студентам

Псевдоэлемент first-line красит первую строку абзаца в синий, но я создал индивидуальный класс абзаца biline и присвоил ему черный цвет. Как сделать чтобы этот класс игнорировал first-line и оставался чёрным? Спасибо.

CSS

p::first-line {
font-weight: bold;
color: blue;
}
.main p.biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    color: black;
}

HTML5

<body>
<div class="main">
    <h1>tatata <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p class="biline">31 октября <strong>Роман Дибров</strong></p>
</div>
</body>

Добавлено через 4 минуты
Даже если класс идентификатором заменить всё ровно не выходит

@deller · 14.08.2016, 21:28

CSS

1	color: black !important;

@Aqua77 · 14.08.2016, 21:43 **[ТС]**

Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор?

@deller · 14.08.2016, 22:00

Сообщение от Aqua77

Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор?

Хм... получается что так

Добавлено через 58 секунд
А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете

@mrtoxas · 14.08.2016, 22:03

CSS

p:not(.biline):first-line {
  font-weight: bold;
  color: blue;
}

@Aqua77 · 14.08.2016, 22:15 **[ТС]**

Сообщение от deller

<p> и он в приоритете

HTML5

Я  заменил класс идентификатором и всё ровно псевдоэлемент приоритетнее
<body>
<div id="main">
    <h1>tatata <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p class="biline">31 октября <strong>Роман Дибров</strong></p>
</div>
</body>

CSS

p::first-line {
font-weight: bold;
color: blue;
}
.main p#biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    color: black;
}

Добавлено через 20 секунд

Добавлено через 33 секунды

Сообщение от mrtoxas

p:not(.biline)

Идеально

Добавлено через 4 минуты

Сообщение от deller

А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете

Если так, то и p.biline тоже в элементе <p>

@monochromer · 14.08.2016, 22:32

CSS

1
2
3

.main p.biline::first-line {
  color: inherit;
}

@Aqua77 · 14.08.2016, 22:35 **[ТС]**

Сообщение от monochromer

1
2
3
.main p.biline::first-line {
* color: inherit;
}

Можете помочь разобраться :first-line имеет приоритет больше чем индификатор?

@monochromer · 14.08.2016, 22:50

Сообщение от Aqua77

Можете помочь разобраться :first-line имеет приоритет больше чем индификатор?

Покажите мне селекторы, которые вы сравниваете.

@Aqua77 · 14.08.2016, 22:54 **[ТС]**

Сообщение от monochromer

Покажите мне селекторы, которые вы сравниваете

p::first-line
p#biline

CSS

.main p::first-line {
font-weight: bold;
color: rgb(153,153,153);
}
.main p#biline{
    font-size: 1.6em;
    margin: 5px 0 25px 50px;
    font-weight: bold;
    color: black;
}

Хтмл если важно

HTML5

<div class="main">
    <h1>Большая книга <strong>CSS</strong></h1>
    <h2>Обзор возможностей типографики</h2>
    <p id="biline">31 октября <strong>Роман Дибров</strong></p></div>

@monochromer · 14.08.2016, 22:59

Сообщение от Aqua77

p::first-line
p#biline

Тут дело не в приоритете. Селекторы обращаются к разным элементам:
p#biline - к параграфу
p::first-line - к вложенному в параграф элементу (псевдоэлементу)

Поэтому я выше написал, что стили нужно наследовать.

@Aqua77 · 14.08.2016, 23:05 **[ТС]**

Спасибо, теперь спокойно засну

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	14.08.2016, 22:59	11
	Сообщение было отмечено Fedor92 как решение Решение Сообщение от Aqua77 p::first-line p#biline Тут дело не в приоритете. Селекторы обращаются к разным элементам: p#biline - к параграфу p::first-line - к вложенному в параграф элементу (псевдоэлементу) Поэтому я выше написал, что стили нужно наследовать. 1

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 23:05 [ТС]	12
	Спасибо, теперь спокойно засну 0

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 21:43 [ТС]	3
	Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор? 0

@deller 20 / 25 / 12 Регистрация: 26.06.2013 Сообщений: 111
	14.08.2016, 22:00	4
	Сообщение от Aqua77 Получается псевдоэлемент ::first-line имеет приоритет больше чем индификатор? Хм... получается что так Добавлено через 58 секунд А хотя все правильно, псевдоэлемент находится внутри <p> и он в приоритете 0

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	14.08.2016, 22:35 [ТС]	8
	Сообщение от monochromer 1 2 3 .main p.biline::first-line { * color: inherit; } Можете помочь разобраться :first-line имеет приоритет больше чем индификатор? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	14.08.2016, 22:50	9
	Сообщение от Aqua77 Можете помочь разобраться :first-line имеет приоритет больше чем индификатор? Покажите мне селекторы, которые вы сравниваете. 0

Приоритет псевдоэлемента

Решение