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.
Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...
I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to b ...
Can you explain the distinction between * and body when used in the style tag of HTML? Providing examples would greatly aid my understanding. Thank you! ...
I am seeking tools to enable the calling of .php from .html files. Here is an issue: while this example successfully works in a .php file: <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> &l ...
Currently, I am looking to incorporate a jQuery scrollspy feature into one of my ongoing projects. Upon coming across this jsfiddle (https://jsfiddle.net/mekwall/up4nu/), I successfully integrated it into my project. However, I have hit a roadblock while ...
Presented below is an array of input boxes. <form> 9 <input type="checkbox" name="date[]" value="9"> 10 <input type="checkbox" name="date[]" value="10"> 11 <input type="checkbox" name="date[]" value="11"> </form> The o ...
.unorder_Hnav,li,.classes:active { background-color:#7CA738; height: 50px; display: table-cell; width: 1024px; text-align: center; line-height: 52px; font-weight: bolder; color: #FFFFFF; background-color: #457025; ...
I have designed a website, but when it is viewed on devices like iPad or iPhone, the layout does not adjust to fit the screen properly. The text box containing my name and social media buttons appears on the left side, while the background image is positio ...
Looking for a front-end solution to a common practice. In the past, I've stored reusable HTML elements (such as <nav>, <header>, <footer>, etc.) in a functions.php file and used PHP functions to include them on multiple pages. This ...
Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...
When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag ...
I am trying to dynamically move CSS items based on user input or button clicks. Specifically, I want to increment the position of elements by a specified number of pixels or a percentage of pixels. Currently, I am able to set the starting positions (top a ...
Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...
I'm currently working on ensuring that two grid items have the same height using flex in Material UI, but I've hit a roadblock. It seems like my approach with the Grid element might be incorrect. I've experimented with adjusting the height a ...
Update: After some testing, I discovered that this issue is specific to iPhones. When I tested it with an android device, everything worked perfectly fine. However, when I tried viewing the page on two different iPhones, it broke on both. This problem see ...
I am currently facing two issues. Firstly, I am having trouble figuring out how to add/update the JSON items within a hook. Secondly, React seems to be restricting me from using the name that is stored in a previous JSON file. I am open to exploring alter ...
I have been attempting to implement Google Prettify in my AngularJS project. It seems to be functioning correctly on the main page, but once I navigate to another route using Angular (after ng-view), it stops working properly. You can check out the plunker ...
My radio button is currently checked, but I would like it to be onclicked because there is a Javascript function that uses the on.click function. Are there any possible methods or examples to achieve this? <label style="margin-left:177px;">Order Ty ...
I'm attempting to create a Thymeleaf template for rendering a printable PDF. Here is what I currently have: <html xmlns:th="http://www.thymeleaf.org" > <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...
I am currently facing an issue with positioning a logo and navigation links within a <header> element. When I apply the CSS property text-align:center;, the logo aligns to the center on one line while the navigation links appear on another line direc ...