圆角菜单-当前页面项目

Question

I'm working on a webpage that has a menu with rounded corners. I'm using a theme in WordPress and modifying it, so I'm starting with something someone else has created. I'm middle of the road when it comes to CSS and html- I can kludge things together, but it often isn't exactly elegant and advanced things are beyond me.

Anyway, my problem is this- The menu items change color when the mouse is hovered over them, and have yet a different color when the item represents the current page. The normal menu and the hover items have rounded corners, but not the current page item. This only matters for the left side of the item on the farthest left.

I did find a bit of CSS for the hover state of that item that works, which is as follows:

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

However, I have no idea how to take this same principle and apply it to the current item class. This is what I tried:

.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;

It didn't work, of course. As I say, it's really a shot in the dark.

Answer 1

You can select the first menu item anchor with:

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

This targets:

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

This would be safer than targeting the .current-item class since you're trying to target the first list item specifically to blend it with existing elements, whereas the .current-item class can be used on every menu item.

The problem with your original selector syntax was that this:

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

is trying to select:

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

Most of that isn't in the page's HTML.