Here is the Jsfiddle that I experimented with
<span>*</span>
<br>
<span>*</span>
<br>
<span>hdhdf</span>
span[text='*']
{
color:red;
}
I am looking to target the two spans containing * in their content using CSS. How can this be achieved?
There may be a way to achieve this by utilizing data attributes instead of the current method: http://jsfiddle.net/abcd/
HTML:
<div data-text="*"></div>
CSS:
div[data-text="*"]:after {
content: attr(data-text);
color: blue;
width: 20px;
height: 20px;
}
There is a way to make this more efficient by removing the extra class:
REVISED
HTML
<span>*</span>
<br>
<span>*</span>
<br>
<span>hdhdf</span>
CSS
span:nth-child(1),
span:nth-child(2){
color:red;
}
REVISED.
By exclusively utilizing CSS, achieving results may prove challenging unless attributes are incorporated into the span tag.
Nevertheless, with the aid of jQuery's .filter() function, desired outcomes can be attained.
Feel free to explore the DEMO.
$('span')
.filter(function(){ return $(this).text() == '*'; })
.css('color','#ef8913');
Accessing the text value directly is not possible; a solution would involve utilizing either JQuery or Javascript to handle this task by manipulating the internal content, while keeping within the parameters set by CSS.
Looking for some help with a basic HTML structure here. I have a single row divided into two columns, each containing an image of the same size. What I need is to center one image both horizontally and vertically in each column. <div class="containe ...
I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...
I am currently working on a Wordpress website and struggling to center the menu items that are currently aligned to the left. I have created a child theme from the existing theme's code, but still can't figure out how to achieve this simple task. ...
My issue involves a responsive menu with Bootstrap. On desktop, the menu closes fine; however, on the responsive view, I want it to close when clicking outside of the nav menu in any area. Here is my navigation code: <!-- Navigation --> <nav id= ...
I recently updated my webpage by removing the .html extensions using htaccess. My website includes a page named "blog.html" and a subfolder called "blog" with additional html pages inside. RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ ...
The <img> element's srcset attribute seems to always select the larger <img> source, even when the size media query is false. I found success in using a <picture> element to ensure image selection based on browser width. Based on th ...
Is there a way to display part of a URL in an HTML document, so that if the URL changes, the corresponding content in the body also updates? For instance, www.example.com/?key=i - Is it possible for this link to be dynamically displayed within the body o ...
Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...
Basically, I am looking to display different content based on the status of a job: Show 'Something1' when the job is not processing Show 'Something2' when the job is running and has a status of '0' Show 'Something3&apos ...
Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...
Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...
I'm really struggling to understand why I'm being instructed to cast the object returned by getParameter to a string in the code below. When I try to assign it to the String variable "user," I encounter the error 'Type mismatch: cannot conve ...
I am in the process of designing a website and I have a specific vision for how I want my links to appear, but I am unsure of how to achieve it. Here is the desired outcome: a red link a green link a red link a green link … Below is the HTM ...
<div class='fixed_button homes hidden'> <a class='btn btn-primary homes'>Continue →</a> </div> Using jQuery Library $(".homes").on('click', function(){ $("choose_style").addClass(&apo ...
I noticed that the scrollbar in my fancybox is not showing up on iPad, but it does display when using Google Chrome on Desktop. You can find the page here. The issue seems to be with the vertical scroll bar not appearing on iPad. Has anyone encountered th ...
I am working on a table that contains mat-icon-buttons. When the button is clicked, it should display 2 additional buttons at the end of the table. Upon clicking the first button, its color changes from primary to red, and I would like to add two more butt ...
I have a project in progress that involves integrating HTML and JQuery. One of the tasks is to replace a div with a new one from an external HTML file using the load('some.html #someDiv') method. Everything was going smoothly until I tried to li ...
Is there a way to adjust the background image of a div so that it scales according to the amount the page is scrolled? The current implementation works fine on desktop screens, but on mobile screens, the height of the background image reduces and the image ...
Is there a way to incorporate this specific color scheme into my background? linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%) I have knowledge on how to implement this color using regular CSS, but I'm curious about how it can ...
To introduce you to my work, I have a table filled with data from a database that functions as a CRUD - Create, Read, Update, Delete table. Within this table, there is a column where EDIT and DELETE buttons are located. Clicking on the EDIT button trigger ...