Br: last-child does not work when an item after br

Question

I hide the tags brin my html on a mobile device, but would like only the last tag to brfunction normally. This seems to work if the element after the last bris an anchor tag.

I am using the following code:

p br {
  display: none;
}
p br:last-child {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br>
  <a href="#">READ ARTICLE IN JOURNAL</a>
</p>

Run codeHide result

https://jsfiddle.net/5j8dtwfd/2/

css works as expected with the last brc tag display:blockapplied to it.

However, if I end the text “read article ..” in the anchor, css stops being able to find the latter br.

I'm not sure what is going on here to trigger this, is this the expected behavior?

Answer 1

: last-child . , br br: last-child ( - )

: br: last-of-type (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Alast-of-type)

Answer 2

last-child , br. . last-of-type.

p br {
  display: none;
}
p br:last-of-type {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL
</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br><a href="#">READ ARTICLE IN JOURNAL</a>
</p>

Hide result

, CSS display: block p br:last-child.

, ?

, , br .

, CSS , br, , . , CSS .

br , .

p br {
  display: none;
}
p :last-child {
  display: block;
}

<p>lorem
  <br>loremlorem lorem
  <br>
  <br>READ ARTICLE IN JOURNAL
</p>
<p>lorem
  <br>loremlorem lorem
  <br>
  <br>
  <a href="#">READ ARTICLE IN JOURNAL</a>
</p>

Hide result

Answer 3

p:last-of-type p:last-child

Answer 4

, node , br . - . , , : last-of-type, not: last-child.

Answer 5

" .." ,

p a:last-child{
  display:block;
}

Answer 6

,

p  br{
  display: none;
}

p  br:last-of-type {
  display: block;
}

.

Answer 7

<br> . , height width. , , .

p  br:not(:last-child) {
  display: none;
}

p a {
  display: block;
}

:last-of-type

p  br:not(:last-child) {
  display: none;
}

p br:last-of-type {
  display: block;
}

, :last-of-type: , .

, :

https://css-tricks.com/almanac/selectors/l/last-of-type/