Utilizing CSS to target the ID of an anchor element

I am a beginner in the world of HTML and CSS. I recently attempted to target an element using an id selector in my CSS code, but unfortunately, it did not work as expected. Can someone shed some light on why this might be happening?

<!DOCTYPE html>
<html>
<head>
<style>
    #bigButton a {text-decoration:none;color:green;}
</style>
</head>
<body>
<p>test</p>
<a id=”bigButton” href=”page1.html”>Click here</a>
</body>
</html>

It's worth mentioning that I also attempted the CSS without targeting the <a> tag directly (i.e.

#bigButton {text-decoration:none;color:green;}
) but this alternative approach failed to yield the desired result as well.

Answer №1

a#largeLink {text-decoration:none;color:green;}

Your Custom Style

#bigButton a {text-decoration:none;color:green;}

interpreted as targeting "any a elements within a container with id bigButton".

Answer №2

take out the a to apply the id selector. It would simply be:

#bigButton {text-decoration:none;color:green;}

This code would function as intended:

 #bigButton a {text-decoration:none;color:green;}

If you have a parent element structured like this for a:

<div id="bigButton">
<a  href="page1.html">Click here</a>
</div>

Moreover, as pointed out by @Pilot and @BoltClock, quotation marks may be another reason to consider using something like this instead: " or id="bigButton"

See Demo Online

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing content with Ajax when the back button is clicked

Hey everyone, I've been working on an ajax site and I'm having trouble getting the content to reload when the back button is clicked. I'm using Dynamic Drives ajax content script along with a script that changes the URL onclick and a popstat ...

Prevent the Icon in Material UI from simultaneously changing

I'm working on a table where clicking one icon changes all icons in the list to a different icon. However, I want to prevent them from changing simultaneously. Any suggestions on how to tackle this issue? Code: import React from 'react'; im ...

Dynamically changing the borders of WebGL canvases: a guide to adding and

Here is my code snippet for creating an HTML canvas: <canvas id="glCanvas" class="canvases" width="20" height="20></canvas> To set the color, I am using the following: gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); I am w ...

Overlap one element entirely with another

Currently, I am working on a way for an element called overlayElement to completely cover another element known as originalElement. The overlayElement is an iFrame, but that detail may not be significant in this scenario. My goal is to ensure that the over ...

Seamless animation when collapsing element using angular and css exclusively

I am attempting to incorporate a collapsible feature into my application. Rather than relying on external libraries like jQuery, I want to exclusively utilize Angular. For demonstration purposes, I have created a very basic example here: http://jsfiddle.n ...

Dots are used to indicate overflow of title in React Material UI CardHeader

Is there a way to add ellipsis dots to the title in my Cardheader when it exceeds the parent's width (Card width)? Here is what I have attempted so far: card: { width: 275, display: "flex" }, overflowWithDots: { textOverflow: &apo ...

Attempting to transfer a JSON object from a frontend Form Input to an Express backend

Apologies for bringing up what may seem like a basic issue, but I've been searching extensively (even through axios' documentation) and haven't been able to pinpoint exactly what I need to resolve this issue. I have created a simple To-Do we ...

Ways to assign a default background shade to a webpage with a transparent background

My page has a completely transparent background achieved by using: body { background:none transparent!important; } When I display this page in a transparent iframe on another site, I can see the website's background through the page. However, if ...

What is the best way to enable a DOM element's height to be resized?

I have a widget displayed in the corner of my browser that I would like to make resizable by dragging the header upwards to increase its height. The widget's position remains fixed with its bottom, left, and right properties unchanged, but I need the ...

When I click on any input field, button, or other controls on a webpage, the page automatically zoom

I am currently trying to troubleshoot an issue with a bootstrap theme. It seems to be working perfectly on all browsers except for ios safari browsers. Whenever I click on an input field or button, the page suddenly zooms in. It's quite frustrating. ...

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

Create a URL hyperlink using javascript

I am looking to create a link to a page that updates its URL daily. The main URL is where X represents the day of the month. For example, for today, July 20th, the link should read: In my JavaScript section, I currently have code that retrieves the cur ...

Searching for text in a Python Selenium input field and retrieving suggested values can be achieved by using certain methods and commands

When you type a term like "apple" into the search bar on , a dropdown menu with search suggestions appears. I am attempting to retrieve a list, dictionary, or dataframe of the values in that dropdown box. For example: {'AAPL':['Apple Inc ...

Discovering the specific DOM element that has been clicked using only JavaScript

Looking to enhance my HTML document with interactivity, I wanted to achieve a feature where clicking on a div element would display its respective id. I attempted the following approach: window.onload = function() { associateIds(); clicked(); } fu ...

Finding href links through XPath using a substring of anchor text

In my current HTML project, I am facing a challenge where I need to create an XPath expression to locate all instances of the "A1" text and extract the href attribute from each element on the page. Even though there are multiple occurrences of "A1" through ...

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

I am looking to incorporate a 10 px border at the top of my column by utilizing bootstrap4

How can I add a border to the top of my column using Bootstrap 4? I've been struggling with it and can't seem to get it right. Here is the code I'm currently using, which includes <div> tags for the columns: <!doctype html> &l ...

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

Seamlessly transition between various states within a React component for a fluid user experience

I'm currently working on a simple component structured like this: var component = React.createClass({ render: function(){ if (this.props.isCollapsed){ return this.renderCollapsed(); } return this.renderActive() }, ren ...

obtain the image number by extracting a portion of the text

How can I extract the image number from a string using the sub-string function? I have applied the sub-string function to the property below. It returns 3 at the end in Chrome, but it does not work properly in Mozilla. Issue : After "-->", when I check i ...