CSS hyperlink?

[ladybug]

Hey can I change the href of hyperlink in css? Add a new destination and overwrite it? I need to edit a Wordpress link but editing the html is a pain in the butt because I have to screw with the database. I have done it but it's not pleasant.

 

[Biohazard777]

4 hours ago, stefanmz said:

Hey can I change the href of hyperlink in css? Add a new destination and overwrite it?

This reminds me of:

Anyhow, you need to learn the basics Stefan...
I see your posts and I gotta say if you keep learning how to become a developer just by following tutorials and reading forum posts... your knowledge will be like Swiss cheese:

Full of holes, and as time goes by it will be even harder to go back and learn it properly.

 

The answer to your question is simple: no.
CSS = Cascading Style Sheets, a style sheet language, purpose of which is to describe the presentation of a document...
With CSS (alone) you can change how the hyperlink looks, but you can't change where it points to (href).

 

[ladybug]

38 minutes ago, Biohazard777 said:

This reminds me of:

Anyhow, you need to learn the basics Stefan...
I see your posts and I gotta say if you keep learning how to become a developer just by following tutorials and reading forum posts... your knowledge will be like Swiss cheese:

Full of holes, and as time goes by it will be even harder to go back and learn it properly.

 

The answer to your question is simple: no.
CSS = Cascading Style Sheets, a style sheet language, purpose of which is to describe the presentation of a document...
With CSS (alone) you can change how the hyperlink looks, but you can't change where it points to (href).

 

I mean I kinda know already that you can't but for some reason I think people on the internet might know more than me and conjure up some magic way to do it that for some reason, me who have already written an entire website using only html and css and have some good knowledge about them both overlooked. Anyway thanks for the Swiss joke that was hilarious!

[FlappyBoobs]

You can change it using javascript, and with CSS you could make it appear to change by hiding and showing different elements, so you could create a new link, then hide the old one using display:none. But using plain CSS to change the href of an <a> tag is not possible.

 

However, it is possible to change the src of media on a page using CSS (fonts, images, borders, backgrounds etc).

[SydneyBrokeIt]

Another thing to note is that, even if you *could* change it with CSS -- I've seen some bizarre demonstrations for CSS functionality -- you *really* don't want to do it that way.

CSS is all about presentation.  No meaningful changes to the data itself should be coming in from CSS.  HTML is the data (more or less, there's some metadata around presentation, along with sometimes some presentation itself), and CSS is the presentation.  Trying to edit the HTML (which is the only way to change the actual link) via CSS is like trying to change the canvas of a painting by applying chemicals.

[mariushm]

You can do it easily with Javascript 

 

have the function run on on page load complete or something like that, enumerate all the < a > tags, check the href property of each tag and if it matches that url, replace the href and text to your desired content.

Should be able to add Javascript code to your wordpress easily. 

 

ex see QuerySelectorAll : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

do something like this 

 

const matches = document.querySelectorAll("a[href]");

then enumerate with a forEach or for ()  and compared the href value with your url and change if needed.

 

[ladybug]

On 3/17/2022 at 10:55 AM, mariushm said:

You can do it easily with Javascript 

 

have the function run on on page load complete or something like that, enumerate all the < a > tags, check the href property of each tag and if it matches that url, replace the href and text to your desired content.

Should be able to add Javascript code to your wordpress easily. 

 

ex see QuerySelectorAll : https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

do something like this 

 

const matches = document.querySelectorAll("a[href]");

then enumerate with a forEach or for ()  and compared the href value with your url and change if needed.

 

 

On 3/16/2022 at 7:07 PM, FlappyBoobs said:

You can change it using javascript, and with CSS you could make it appear to change by hiding and showing different elements, so you could create a new link, then hide the old one using display:none. But using plain CSS to change the href of an <a> tag is not possible.

 

However, it is possible to change the src of media on a page using CSS (fonts, images, borders, backgrounds etc).

Thank you for your answers! Yeah the best way is undeniably javascript or directly through html however because of time constraints and lazyness xD I will not do it with javascript I just don't want to bother. So unless I find where the heck the page is in the database,because I searched for it but didn't find it, and change the html code there, unless I do that, I am going to use css tricks, thanks for the suggestion by the way I didn't think about the display property trick. Anyway unless someone knows more about woocommerce and knows how to find the shop page in the database where the other pages are,becuase I couldn't find it there, I am going css

[C2dan88]

What link you are trying to modify? Woocomerce has its own templates located in wp-content/plugins/woocommerce/templates/

[ladybug]

On 3/21/2022 at 7:44 PM, C2dan88 said:

What link you are trying to modify? Woocomerce has its own templates located in wp-content/plugins/woocommerce/templates/

oh that makes sense. So I need to search for that in the database probably. I need to edit html code in one of the templates to fix a hyperlink to work right with my website

[C2dan88]

More than likely seeing as that is how WordPress templates work.