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'))
Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...
I am currently working on a project using ASP.NET MVC 4 and I'm facing an issue with sending a JSON object to a controller that is supposed to accept it. Here is the snippet of javascript and jQuery code I am using: var jsonObject = { "PlantShip ...
Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...
Seeking assistance with validating arrays in Laravel using FormRequest validation <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class VendorStoreRoom extends FormRequest { /** * Dete ...
I am facing an issue where a div with a box-shadow and an h1 inside are not aligned properly, causing the shadow to not cover the h1 element. Below is the code snippet in question: h1 { position: absolute; top: 50%; left: 44%; -webkit-t ...
Take note that the li with child ul is set to display:inline - example code provided below <style type="text/css"> ul.nav_main li { display: inline } ul.nav_submenu li { display: block } </style> <ul class="nav_main"> <li>I ...
I am having an issue trying to add a blur filter to an SVG element. It appears that Safari is not rendering the colors correctly. Take a look at this example: <svg height="110" width="110"> <defs> <filter id="f1" x="0" y="0"&g ...
Having trouble with the sizing of my tabs in a project I'm working on. The first tab displays ingredients, while the second tab allows for adding new ingredients with various forms. However, when selecting different forms, the width of the form contai ...
On every single one of my pages, the content fits perfectly within the body: However, when I have forms on the page, they extend beyond the footer and the body doesn't resize accordingly: Where could the issue be coming from? ...
How can I align a label and a range input field on the same line? I have tried using display: inline-block, but it does not seem to work. There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effect ...
Could someone help me unravel this simple issue I seem to be having? My page layout is functioning correctly, but when I apply media breakpoints, nothing changes. Here's an example of my CSS where I am just adjusting the font size in an attempt to mak ...
I am facing an issue with my header and need assistance in fixing it. The problem occurs when scrolling down, as it cuts off a part of the header, but returns to normal when scrolling back up. I suspect the hamburger menu might be causing this issue becaus ...
Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as ...
I have created a simple dropdown CSS menu positioned in the footer with an upwards direction. You can view it here: http://jsfiddle.net/RmTpc/11/ My issue is that I want the opened menu to have some bottom margin from the main list item ("Items"). However ...
When using the .trigger() method with the Event object, considering the which property, JS char codes from this source, and the code snippet below, why doesn't the #example input receive the character a as an automatically typed value? Have I misinter ...
How can I show a message to the user on the HTML page confirming their selected date without using an alert box? I attempted this code snippet, but I'm uncertain: document.writeln("The date you picked is: " + dateText); ...
Recently, I came across an interesting feature on Facebook where text in messages is automatically converted into smiley faces without the need to reload the page. This got me thinking about how I could recreate this same functionality using jQuery and HTM ...
I've been attempting to mirror this function: and: I'm currently utilizing JS and Vue to develop my web application. Any advice on navigating through the current dilemma I find myself in would be greatly appreciated. So far, I have successfully ...
Looking to adjust the timing on a number increase function using setInterval(Function, time). Initially set the variable for time as time = 1000, but now looking to dynamically change it by implementing a function triggered by a button click: function cha ...
Trying to grasp the concept of reloading a dynamic page loaded with AJAX after a record is updated. Here's the jquery script on the page: <script type="text/javascript> function showUser(str) { if (str == "") { $("#txtHint").empty() ...