Закругленное угловое меню - элемент текущей страницы

Question

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

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

Я нашел немного CSS для состояния наведения этого элемента, который работает, а именно:

.menu > li:first-child:hover, 
.menu > li:first-child:hover a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; }

Тем не менее, я понятия не имею, как взять этот же принцип и применить его к текущему классу предметов. Вот что я попробовал:

.menu .current_page_item a > li:first-child:,
.menu  .current_menu_item a > li:first-child: {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;

Это не сработало, конечно. Как я уже сказал, это действительно выстрел в темноте.

Answer 1

Вы можете выбрать первый пункт меню с помощью:

.menu > li:first-child > a {
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}

Это цели:

the menu > the first list item inside that menu > the anchor immediately inside that list item

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

Проблема с вашим оригинальным синтаксисом селектора заключалась в следующем:

.menu .current_page_item a > li:first-child:

пытается выбрать:

the menu > the current list item > the anchor inside that item >
the first list item immediately inside that item

Большая часть этого не в HTML страницы.