Skip to main content
Known Participant
January 10, 2023
Question

color a specific word in database

  • January 10, 2023
  • 2 replies
  • 200 views

Hi, is there any way to make last 2 word "speical "& "Sale" color in red?

The menu is extracted from my database

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Community Expert
    January 10, 2023

    No <span> tags necessary.  Use the CSS nth-last-child pseudo-class to select the last 2 items in your list.

     

    Assuming you output data inside the following HTML5 structure.

    <nav>

    <ul>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

    <li>Item 4</li>

    <li>Item 5</li>

    </ul>

    </nav>

     

    Put this CSS code in your stylesheet. 

     

    nav li:nth-last-child(-n+2) {color:red;}

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Legend
    January 10, 2023

    I should have looked closer and observed it was a list of items to be output rather than a bit of inline text. 

    Legend
    January 10, 2023

    Wrap them in a span tag within the database.

     

    <span class="red">Special</span>

     

    Then use css to style span tags with the class of red:

     

    .red {

    color: red;

    }