Kevin Powell - Community•4mo ago

Pseudo Selector Solution?

I feel silly for asking this, but I'm currently trying to target something on a social site that allows custom code. I've been able to figure most things out. But I'm currently struggling to find a possible solution. On the site, in one section the header has words wrapped around a link. If I use ::before, the whole thing changes. If I use :not() I can't exclude the href present. Thought maybe I'm using it wrong with this current attempt. The html essentially looks like such...

<div class="divname">
<h4>"word are here[" == $0
<a href="link">link title</a>
"]"
</h4>
<p></p>
</div>

<div class="divname">
<h4>"word are here[" == $0
<a href="link">link title</a>
"]"
</h4>
<p></p>
</div>

Is there a way to target just the sentence before the link or way to exclude the link? I want to change the before and essentially keep the link and the after if possible Quick edit: The site does not allow for Java, so I'm limited to pure CSS.

13 Replies

MarkBoots•4mo ago

what css properties do you want to change? It depends because some will cascade down (such as font, color etc) *:has(>a) will select the <h4> but because that is the parent of <a> some properties you change on the h4 will affect the link as well otherwise, there always is javascript

TheJoshShephard•4mo ago

Hey @MarkBoots thanks for responding! I'm mainly looking for a way to replace the content. That way if says "Latest Projects [view]" for example, I wanna change it to "New Post" [view]. So I need to target the words before the <a>, but :not(a) doesn't work, I've also tried :not([href]) and :not(href) assuming that works. Also I should have clarified previously in the post. The site does not allow javascript. So everything I do is purely CSS based Thanks!

MarkBoots•4mo ago

replacing the text with css only is not possible

TheJoshShephard•4mo ago

Noted. It's just on the site, what I've been doing is the following

.divname h4{
text-indent: -9999px;
line-height: 0;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
gap: 7px;
}
.divname h4::before{
content: "New Title Here";
text-indent: 0;
display: block;
line-height: 1.9em;
}

.divname h4{
text-indent: -9999px;
line-height: 0;
display: flex;
flex-direction: column-reverse;
flex-wrap: nowrap;
gap: 7px;
}
.divname h4::before{
content: "New Title Here";
text-indent: 0;
display: block;
line-height: 1.9em;
}

So that's why I'm trying to figure how to target whats before <a>, that way I can alter and replace it like such. Which has worked on every part except the section I'm currently working on

MarkBoots•4mo ago

as the text is not wrapped seperatly, i don't think there is a way. but will try and think about it

TheJoshShephard•4mo ago

Yeah I had a feeling that might be an issue. So I assume I would likely just have to re enter the full thing with the link included. But if there is a way, that would be awesome!

ChooKing•4mo ago

Since you have to use JS to replace text. Do the whole thing in JS.

const text = document.querySelector(".divname a").previousSibling;
text.textContent = "something else"

const text = document.querySelector(".divname a").previousSibling;
text.textContent = "something else"

MarkBoots•4mo ago

maybe i have something. --edit: deleted the pen, see screenshot below

TheJoshShephard•4mo ago

Hey Choo, thanks for the response, unfortunately on the site. I'm limited to pure CSS. I'll make an edit to my post real quick. Because I did mention it once earlier! WOW! That was quick! I'll give it a shot, one moment. Thanks, Mark! So that almost works, I think I just need to trouble shoot it a little or figure how I can adjust it with my current code. Thanks again, Mark! I'll get back to you if I figure it out!

MarkBoots•4mo ago

no problem, good luck

TheJoshShephard•4mo ago

Hey Mark, So I just played around with stuff again, and I think unfortunately that work. It looks like I'll just have to skip preserving the link all together. Which is still fine I guess. I still appreciate you attempting to help find a solution. Still gave me some insight on how else to approach things!

MarkBoots•4mo ago

for future reference (deleted the pen)

TheJoshShephard•4mo ago

I greatly appreciate it! I'll save the screenshot for future reference! Thanks again for everything!

Gaming

Programming

Pseudo Selector Solution?