[Resolved] Links within list items

[Paul]

Hi There,

I added a class to links within paragraphs and list items (see below). The problem is the li also effects the nav and sub-nav – do you know if I can just target links within li items within the content (not nav items)? There is also an example link in the private info.

Thanks

p a {
box-shadow: 0px -1px 0px var(–bluedark-300) inset;
transition: all 0.3s ease 0s;
padding: 2px;
}

p a:hover {
box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

li a {
box-shadow: 0px -1px 0px var(–bluedark-300) inset;
transition: all 0.3s ease 0s;
padding: 2px;
}

li a:hover {
box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

[David]

Hi there,

your post content is output inside a div with the entry-content class. So you can use that in your CSS Selector like so:

.entry-content :is(p, li) a {
    box-shadow: 0px -1px 0px var(–bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.entry-content :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

As the CSS Rule for your p and li had the same properties i also combined them using the :is pseudo selector.

[Paul]

Thank you David! Much appreciated as always.

[Paul]

Hi David,

I just tried using that CSS but removes all link styles in the content?

Cheers
Paul

[David]

Can i see a link to a page where the link styles are missing ?

[David]

Try:

.entry-content p a,
.entry-content li a {
    box-shadow: 0px -1px 0px var(–bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.entry-content p a:hover,
.entry-content li a:hover {
    box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

[Paul]

Just tried that and still don’t see the link styles (link to example page in private info)

Thanks

[David]

Ok, try this:

.dynamic-entry-content :is(p, li) a {
    box-shadow: 0px -1px 0px var(--bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.dynamic-entry-content :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--bluedark-300) inset;
}

As you’re using a Block Element content template we need to use: dynamic-entry-content
And the other issue was the double hyphen in var(--bluedark-300) was getting swapped out for a long hyphen.
If it still plays up re-type the two hyphens.

[Paul]

Hi David,

Thank you for persisting with this and sorry to be a pain!

Just tried it and still not working for me I also tried replacing the var(–bluedark-300) with a # colour to rule that as the issue.

Cheers
Paul

[David]

Have you tried clearing your browser caches ? As i can see the styles

[Paul]

Ahhh can see them now – thanks you, need more coffee 🙂

Is there anyway those link styles also display in the sidebar on the post page (see link in private info)?

Ideally would like links also in pages body content to use the same style so for example (link in private info).

[David]

Try this instead:

#page :is(p, li) a {
    box-shadow: 0px -1px 0px var(--bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

#page :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--bluedark-300) inset;
}

[Paul]

Perfect! Thank you David and have a great day!

Paul

[David]

Glad to be of help – you too

[Author]

Posts