I have a group of mat-icons that are automatically generated, meaning I cannot assign them ids or classes. The only way to distinguish between them is by their names:
<mat-icon role="img">details</mat-icon>
<mat-icon role="img">edit</mat-icon>
<mat-icon role="img">delete</mat-icon>
My question is, can I target and style only the "delete" icon without affecting the others based on its name? Is this possible?
Short answer: unfortunately No!
Long answer:
The code snippet
<mat-icon role="img">delete</mat-icon><mat-icon
class="mat-icon notranslate material-icons mat-icon-no-color"
role="img" aria-hidden="true">delete</mat-icon>
Upon closer inspection, it is evident that there are no useful identifiers (such as class names or data properties) within the element that can be targeted using CSS selectors. The only distinguishable information resides in the text content of the element which cannot be utilized for selecting elements as per the specifications.
There have been discussions about introducing the :contains() selector but it never materialized.
BONUS:
If all else fails, resorting to JavaScript/TypeScript may be the solution:
let editIcons =[].filter.call(document.getElementsByTagName('mat-icon'),
el => el.innerText=="edit");
editIcons.forEach( e => {
e.style.color = "red";
});
I won't bore you with the details, but I'm trying to overlay image links on top of a background image in specific positions. Despite my best efforts, the images are not changing no matter how much I tweak their parameters. Here is the HTML code: ...
Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...
My issue involves a parent component called RemoteMpnitoringOverviewComponent and a child component called FilterIncidentsComponent, which appears as a modal. However, I am facing the problem of the parent component being displayed twice on the screen. I ...
I am currently working on a CSS effect for some images. My goal is to have an image appear from the left side, move towards the right side, then reappear from the left and repeat this cycle. I managed to achieve this using the code below: @keyframes sli ...
I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...
Could you please assist me in resolving this issue? ProfileComponent.html:4 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.D ...
As I work on my website, I have integrated a CSS keyframes animation that is triggered by clicking a link connected to a JavaScript function. Here is an excerpt from my CSS file: #banner { background-color: #00BBD2; position: absolute; width: 100%; heigh ...
Being relatively new to application development with NativeScript, I find myself in a situation where I need assistance in finding a solution. Drawing from my experience with PHP, I am now looking to create a template for each "page" of the application. Th ...
As a newcomer to Angular 2, I am working on creating a login form that encrypts and sends the user's emailid and password to the server. I have successfully implemented AES-ECB using AES-CTR from the following link: https://github.com/diafygi/webcry ...
In the development process, I am currently working on breaking down a large component that retrieves data from a selected record and loads it into a FormGroup using FormBuilder. My goal is to divide this component into reusable services and child componen ...
When utilizing MUI Autocomplete, the generic value specified in onChange / value is determined by the interface of the object set in the options property. For instance, consider an autocomplete with the following setup: <Autocomplete options={top ...
After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...
I have developed a basic form validation feature for React. The inspiration for this project came from the following source: When I try to submit the form, input errors arise within the isValid function. I am seeking assistance in resolving this issue. A ...
Click button to open modal: <button type="button" class="btn" onclick="CountClass()" runat="server" data-toggle="modal" data-target="#inlineForm1">OPEN</button> The modal code: <div class="modal fade text-left" id="inlineForm1" tabindex=" ...
Recently, I have been developing a website that functions similarly to olx, displaying ads based on the visitor's location (for example, showing Mumbai ads if the visitor is from Mumbai). Initially, I was planning to create separate pages for each cit ...
Before attempting to create a dropdown menu with an array retrieved using useSWR, I first practiced creating one with a hardcoded array. I used this for the initial practice: https://codesandbox.io/s/76k0ft?file=/demo.tsx:1819-2045 Instead of using a hard ...
Two modules share the same path but have different templates (main and auth). The modules should be loaded based on whether the user is authenticated or not. Unfortunately, this functionality is not currently working as intended. Below are the relevant co ...
I want to dynamically change the CSS class of a span element in an ngx datatable based on the value. Here is my HTML code: <ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50" [rowHe ...
I'm encountering an issue in my Angular v12 project where I receive the error message Cannot find module '@angular/http/src/static_response' or its corresponding type declarations when I attempt to use the import statement in my code: import ...
I'm facing an issue with loading .html pages (including JavaScript) into a div element. Below is my div setup: <div class="content"></div> This is my php code: <?php if(!$_POST['page']) die("0"); $page = (int)$_POST[&a ...