How can SASS be used to style a span based on its content?

In order to add css styling to a span element, I am looking to utilize only the dynamic SASS style processor without relying on any javascript/jQuery.

The condition for applying the style should be based on the content of the span.

For example: 

<span>Should be green</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>
<span>Just span</span>

Despite my research efforts, I have not been able to find a solution yet.

I understand that it is possible to achieve this easily using jQuery or JS, however, I am determined to discover a SASS-based solution.

Any advice would be greatly appreciated! Thank you!

htmlcsssassstyles

Answer №1

To customize the styling of multiple spans at once, you can simply add a class or div and apply CSS to all the spans within it.

.demo-class span {
  display: block;
  font-size: 30px;
}
.demo-class span:nth-of-type(1) {
      color: #008000;
}
.demo-class span:nth-of-type(2) {
      color: #7a73aa;
      font-size: 20px;
}
.demo-class span:nth-of-type(3) {
      color: #ea5f72;
      font-size: 15px;
}
.demo-class span:nth-of-type(4) {
      color: #f1cb06;
}
.demo-class span:nth-of-type(5) {
      color: #7a73aa;
      font-size: 15px;
}
.demo-class span:nth-of-type(6) {
      color: #f1cb06;
}
<div class="demo-class">
  <span>Should be green</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
  <span>Just span</span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to add to content that is generated dynamically

Upon loading the page, I noticed that the #navbarUsername field remains empty while all other scripts below it run correctly. Despite attempting to use $(document).on('ready', '#navbarUsername', function () {..., this did not resolve th ...

jqueryhtml

Ways to shift placeholder text slightly to the right within a select dropdown?

Struggling with this issue for hours, I can't seem to figure out how to: Adjust the position of the placeholder text (Search) by 10 pixels to the right in my select component Reduce the height of the field (maybe by 5px) without success. Could someo ...

javascriptcssangularsassangular-material

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox

Tips for choosing elements based on a specific attribute (such as fill color) in D3.js using the SelectAll method

I have various sets of circles on a map - 10 red circles, 10 blue circles, and 10 green circles. Is there a way to use d3 selectAll or select to specifically choose only the red circles? Are there any alternative methods for achieving this? The color of ...

javascriptcssd3.js

Is anyone interested in incorporating Bootstrap 4.1.2 into their project and utilizing the npm package manager for easy integration?

I am trying to integrate Bootstrap 4.1.2 into my project using npm as a package manager. Can someone assist with this? ** note: I prefer to have Bootstrap locally rather than using BootstrapCDN as shown below: <link rel="stylesheet" href="//maxcdn.boo ...

htmlcsstwitter-bootstrapnpmstylesheet

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

htmlcsstwitter-bootstrap

A step-by-step guide on adding a table with colored icons (red, green, and blue) to an HTML page using jQuery

I'm working on a project that requires designing an HTML page with three tables containing images, along with a compare button. Initially, only two tables are visible upon page load, but when the user clicks the compare button, the third table should ...

jqueryhtmlcss

Tips for Preserving the HTML Page State After Making jQuery Changes

Hi there! I am currently working on developing a card game using HTML5, CSS3, and Javascript. This game will communicate with a server built on node.js, facilitated by socket.io for data transmission. One of the key features I am trying to implement is th ...

javascriptjqueryhtmlnode.jssocket.io

Make individual term span the entire width of 100%

Is it feasible to expand a single word like "News" to occupy 100% width of the div element? My goal is to automatically adjust letter spacing and justify individual words. Currently, I have a menu with items such as: Home About News Etc It would be idea ...

htmlcss

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

javascriptjqueryhtml

What steps can I take to ensure my header appears perfectly aligned? (HTML/CSS)

My header on my website is all messed up with the links appearing incorrectly. I suspect it's an issue with style.css, so I attempted to modify the style.css file but had no luck. I have very limited experience with .css and cannot seem to figure out ...

htmlcss

How can you prioritize one CSS file over another?

To avoid repetition, I wish to have all the classes, tags, and ids from css.css take precedence over bootstrap.min.css, without duplicating any from bootstrap.min.css. <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/css.css ...

htmlcss

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

When updating the location.hash property via a click event, it appears to be set to

Check out the code snippet below: $(e).click(function() { console.log(this.href); location.hash = this.href; }); In this code snippet, e refers to a <li> element structured like this: <li href="#about">About</li> The location. ...

javascripthtmlundefined

The functionality of Ajax loading content will fail when the link is already loaded

I am currently using an ajax script that dynamically replaces the content of #main with the contents of a loaded page based on the clicked link. For example, clicking on rddd would replace #main with the content of about.php. However, I encountered an is ...

javascriptjqueryhtmlajax

What is the process for displaying a document file in an iframe that is returned from a link's action?

I have a main page called index.cshtml. This page displays a list of document files along with an iframe next to it. My goal is to load the selected document file into the iframe when I click on any item in the list. However, currently, when I click on a d ...

javascripthtmlasp.net-mvc

Tips for customizing the default CSS styles of a table

This question has been raised on Stack Overflow before. However, the solutions provided do not seem to work for me. I am currently working on an Angular project and I am trying to align the 'Mode of comparison' and the corresponding 'Dropdow ...

htmlcss

What is the best way to highlight the option with a value of 0 by giving it a red background using either CSS, jQuery, or both, regardless of whether it is

I have tried various CSS and jQuery combinations to address the issue of displaying the option with a value of 0 in red only when it is not selected. .red { background: red; } select option[value=0] { background: red; } <select id="ups"> < ...

javascripthtmljquerycss

If the width of the window is greater than 1080, do this action. Otherwise, switch back to using CSS and ensure to check for changes upon

I am creating a section on a webpage where the height is determined by screen.availHeight. It works perfectly, but I also want it to reset to the default height in the CSS when the width goes below 1080px. I've tried different approaches, but haven&ap ...

jqueryhtmlcssif-statementwindow-resize

Operating PHP program from html on Beaglebone Black Rev C Debian

I've created a JavaScript program that utilizes node.js to manage GPIO from an IO.html page to the beaglebone. I simply initiate the JavaScript with "node myscript.js". Now, I'm looking to incorporate a PHP file that will store data from the IO. ...

javascriptphphtmlmysql