How to get CSS descendants to work

[Russell]

Hello:

I know this is like CSS 101, and normally I’m good with specifying descendants, but I can’t get this example to work. Basically I want a little X character* to appear before an li item that has the class .current_page_item. I also only want this arrow to appear in a sub-list.

I’ve set up a codepen here: https://codepen.io/compoundeye/pen/NaWNQX

What I want: for only ‘Working in Partnership’ to have the X.

What I don’t want: for ‘About Us’ to have the arrow X. Since this is the parent page (and Working in Parternship is the child page), I’ll format ‘About Us’ differently.

I’ve tried this CSS rule but it didn’t work:

aside#advanced_sidebar_menu-2 
ul.child-sidebar-menu
li.current_page_item a::before {
    content: "X";
    font-family: helvetica;
    padding-right:5px;
}

… that just got rid of all Xs.

The working page where this sidebar menu is in action is here: http://ukandglobal.com/new/about-us/.

• You’ll also see that the X is actually a FontAwesome arrow character. I replaced that with an X here because Codepen didn’t recognise FontAwesome.

OK, thanks in advance for any suggestions.

Cheers, Russell

[deb]

Hi there
just put direct descendant like:

aside#advanced_sidebar_menu-2
ul.child-sidebar-menu
li.current_page_item > a::before {
content: "X";
font-family: helvetica;
padding-right:5px;
}

paste this code, it will work.

[JeroenR]

I think that’s the other way around, the X should only appear in the second listitem.
So the selector should have the second listitem in it, something like this: aside#advanced_sidebar_menu-2 li.current_page_item li a::before

[Author]

Posts