:Поведение селектора Last-of-Type

Псевдокласс :last-of-type нацелен на последний элемент указанного типа внутри родительского контейнера. Однако в контексте вашего селектора CSS (p.visible:last-of-type) важно отметить, что :last-of-type применяется исключительно к типам элементов, а не к экземплярам классов.

В вашем HTML-разметка:

  
This should be hidden
  
This should be displayed
  
This should be hidden

Проблема возникает потому, что :last-of-type нацелен на последний элемент

, который в данном случае не имеет класса .visible. Следовательно, ни один из ваших элементов

не виден.

Решение

Чтобы настроить таргетинг на последний элемент

с помощью класса .visible, вы должны использовать JavaScript, поскольку для этой конкретной цели нет встроенного селектора CSS.