Can CSS be used to target elements based on the value of another attribute? For instance:
<div data-attr1="abc" data-attr2="def"></div>
<div data-attr1="abc" data-attr2="abc"></div>
I am looking for something like this (although it doesn't work):
div[data-attr1=data-attr2]
This would ideally select the second DIV, but not the first.
Using CSS alone won't allow you to achieve this particular task. However, with the help of JavaScript (specifically jQuery), you can accomplish it like so:
var matchingDataAttributes = new Array();
$.each($("[data-attr1]"), function(index, element){
if($(element).attr("data-attr1") == $(element).attr("data-attr2")){
matchingDataAttributes.push(element);
}
});
console.log($(matchingDataAttributes));
In this code snippet, the matchingDataAttributes variable will store any
<div data-attr1="abc" data-attr2="abc"></div>data-attr1 matches the value of data-attr2.
Nope, CSS doesn't offer that feature. You might need to turn to JavaScript or have the HTML generator include a class or marker attribute when those specific attributes align.
For more information, check out the latest selectors specification; focusing on the section related to attribute selectors, but unfortunately, nothing resembling your request is listed there.
One possible solution is to employ jQuery:
if ($('section').attr('data-attribute') == $('section').attr('data-property'))
I have some experience working in web development, but I am relatively new to Angular. My current project involves creating a simple filter for a table's column based on user input. However, I'm facing an issue where typing in a single letter fil ...
As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...
Currently, I am using AJAX to call a PHP processing file and append the returned HTML using the following code: $.ajax({ type: "POST", url: "proc/process.php", data: dataString, cache: false, success: function(html){ $("ul#list ...
I'm encountering an issue with some code I have. It's related to a jQuery function that adjusts the position of an object as the user scrolls down the page. The code looks like this: $(document).ready(function(){ $(window).scroll(function(){ ...
There are two JQuery Ajax calls in this scenario. The first call retrieves user messages from MySQL, along with the number of likes for each message and a button for users to like the message. This initial request is functioning correctly. The second Ajax ...
I am currently facing a scenario where I need to dynamically create a div. My initial approach was to create it on the document ready event, but the requirement is for it to be displayed only upon selection. The problem I am encountering is that the empty ...
Utilizing jQuery's load() method, I am attempting to insert a page fragment into a new page. It appears that this can only be achieved with load(), as get() does not support page fragments. Upon completion of the load, it is necessary for me to invok ...
I've encountered a sudden error in my gulp build related to jQuery validation. There haven't been any recent changes that would trigger this issue. Interestingly, one of my colleagues is experiencing the same problem, while another one is not. We ...
I'm having trouble changing the color of an Awesome Icon with this code I created. Instead of getting the desired color, I am getting 'undefined' as a result. <script type="text/javascript"> function changeAIColor(idName) { alert ...
I'm facing some difficulties when trying to render an event in the month view of FullCalendar. Below is the code snippet that makes a .getJSON call from the razor page, followed by the JsonResult returned by the controller and the object displayed in ...
I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...
I've been updating my website by replacing most inline images with sprites. Here's a basic CSS code snippet for the sprite class: .sprite{ background-image:url(...); background-position:...; width: 16px; height:16px; } After learning that nest ...
I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...
Struggling to implement a dropdown feature on a vertical navigation using Jquery. The HTML includes a nav section with 1st level list items and nested li's for second level menu items. On clicking the 1st level li, the intention is to toggle SHOW/HID ...
Utilizing React's CSS animations add-on has been a seamless process, with everything running smoothly when using the provided classnames. .quote-enter { opacity: 0.01; transition: opacity .25s ease-in; } .quote-enter.quote-enter-active { opaci ...
I am having an issue with vertical centering on a website I created. Everything looks fine on my monitor, but at higher resolutions, the tables don't align in the center and the image shrinks. How can I ensure that everything stays aligned properly? ...
When a user clicks a button, I am making an ajax call to send out multiple emails. My goal is to update a "Please wait..." div before and after the call with status updates, as well as report any errors that may occur. However, I have encountered an issue ...
Do the html form input elements like text fields or select boxes automatically inherit the font-family property from the body? For instance: body { font-family: 'Lucida Casual', 'Comic Sans MS'; } The above font will not be applied t ...
How can I reference <ng-template #modal_Template> in my component.ts file? Previously, I triggered a modal using a button on my HTML file and included this code: <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)"> ...
ISSUE Hello there! I'm facing a challenge where I need to display a div when a button is clicked. The issue arises from having multiple divs with the same class, making it difficult for me to target each individual div... Image1 Image2 Desired Outco ...