Utilize the attribute selector to apply styling directly within HTML elements

My job requires me to use a CMS that does not give me access to the head-section in order to utilize attribute selectors. I attempted to address this issue by using inline styles. Here is a simplified version of my HTML code:

<div>
    <style type="text/css" scoped>

        a[href*="test"] { background: #000000;}

    </style>

    <a href="www.test.de">Test</a>
    <a href="www.nothing.de">Nothing</a>

</div>

I expected the first link to have a black background, but nothing changed when tested with IE10. I even tried using the "scoped" keyword as shown in the example, but it did not work either. When I replaced the attribute selector with

a { background: #000000;}

it worked perfectly for all the hyperlinks. Is it true that attribute selectors cannot be used with inline styles? Can anyone provide a solution on how to achieve this task?

Answer №1

Appreciate the assistance. The issue I was trying to address should be resolved. It turns out that the problem lies with IE, not the HTML or CSS. Now that I am aware of this issue, I have done some research and found that others have faced similar problems in the past. For more information, you can check out this link.

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

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...

Monitor the traffic on my website by implementing .htaccess restrictions

I am maintaining a website with restricted access to specific IP addresses listed in the .htaccess file. I am looking to implement a logging system that tracks unauthorized attempts to access the site. Is it feasible to record each attempt in a database? ...

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

What could be causing this table to exceed its dimensions by 2 pixels?

Why is the height of this table 102px instead of 100px? Is there another CSS attribute that needs to be set besides: table { border-spacing:0; border-collapse:collapse; } For example, check out this example link. ...

Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...

Custom PHP Search Form with Tailored Filter Options

Currently, I am dedicating my own time to learning the basics of HTML, PHP and SQL in order to enhance my skills for work purposes. As part of this learning journey, I have challenged myself to create a website based on a fictional Books company. I have s ...

What is the best way to retrieve the background color of specific table cells?

I have a table that showcases various pieces of information. One interesting feature I added is a notes column, which includes a tooltip created using CSS and jQuery. However, there seems to be an issue with the tooltip's behavior - when I hover over ...

Tips for concealing overflowing CSS content

How can I prevent CSS content from overflowing? I am trying to display a price tag in the CSS element, but it is protruding out of my card. .content{ content:''; position: absolute; left: 309px; ...

Using jquery and Ajax to extract data from nested JSON structures

Need help with modifying a code snippet for parsing nested JSON format [ { "name":"Barot Bellingham", "shortname":"Barot_Bellingham", "reknown":"Royal Academy of Painting and Sculpture", "bio":"Barot has just finished his final year at T ...

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

The usage of CSS pseudo elements with the position absolute property

To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element. The position of the pseudo-element is set to absolute and relative to the parent to position it inside the p ...

What is the best way to merge variable name in AngularJS?

How to combine variable name in HTML code: app.controller example $scope.name ='abc'; $scope.abc123 = response.data; HTML example <h1>{{name}}</h1> <h1>{{{{name}}123}}</h1> <!-- I want the value of abc ...

Div Randomly Transforms Its Vertical Position

After successfully creating a VS Code Extension for code completion, I decided to develop a website as a landing page where users can sign up and customize their extension settings. The editor I built pops up first on the page seemed to be working fine in ...

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

After creating a CSS3 gradient using ColorZilla, I noticed an issue with the DATA URI that seems to be causing problems. Check out my fiddle link here: http://jsfiddle.net/cY7Lp/. In WebKit & Firefox browsers, the rounded corners display correctly. Ho ...

Change the class of each item in a list individually by hovering over them with the mouse using JavaScript

How to toggle classes in a list item one by one using the mouseover event in JavaScript? const items = document.querySelectorAll("ul li"); let currentItem; for (const item of items) { item.addEventListener("mouseover", e => { currentItem &am ...

Encountered an issue with instafeed.js due to CORS policy restrictions

Trying to implement an API that provides JSON data for use in a function. Required Imports: Importing Jquery, instafeed.min.js, and the API (instant-tokens.com). <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js& ...

Vanishing Submenus

I'm experiencing an issue with my navbar and its drop-down menus. When I hover over the submenu, it doesn't stay visible as expected. I've tried different approaches such as using jQuery, the + operator in CSS, and even creating a separate h ...

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you. Below is the code snippet: fun ...

Using a pseudo-element after to center CSS content

Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...