Alter the CSS background styling in my code

Can someone help me with my CSS issue? I'm not very skilled in this area.

I currently have the following CSS code:

#mo-stats-w1 {
    background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x;
    /*height: 143px;*/
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 10px 0px 0px 0px;
    padding-bottom: 10px;
    background-color: #3EC4CD;
}
#mo-stats-w2 {
    padding: 12px 0px 0px 15px;
}

#mo-stats-w1 ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 1px 0px;
    height: 59px;
}
#mo-stats-w1 ul li {
    display: block;
    list-style: none;
    padding: 1px;/*0px 0px 0px 0px;*/
    margin: 0px 1px 0px 0px;
    width: 174px;
    height: 59px;
    float: left;
}
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; }
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; }

#mo-stats-w1 ul li strong {
    font-size: 24px;
    height: 22px;
    font-family: Arial, "Nimbus Sans L", "FreeSans";
    font-weight: bold;
    color: #1774C2;
    text-shadow: 1px 1px 1px white;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 10px 0px 0px 11px;
}


#mo-stats-w1 ul li span {
    font-size: 13px;
    font-weight: bold;
    color: #3e3e3e;
    display: block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 11px;
}

Here is the HTML code that goes along with it:

    <div id="mo-stats-w1">

        <div id="mo-stats-w2">

            <ul id="mo-stats-r2">

                <li><strong>Status</strong></li>
                <li><strong>100</strong> <span>Points</span></li>
                <li><strong>30</strong> <span>Pending Points</span></li>
                <li><strong>0</strong> <span>Direct Referrals</span></li>

                <li><strong>Total</strong></li>
                    <li><strong>2</strong> <span>Links</span></li>
                    <li><strong>114</strong> <span>Views</span></li>
                    <li><strong>7</strong> <span>Unlocked Views</span></li>



            </ul>
        </div>

    </div>

I am looking to change the background for "Status" and "Total" to #4EC772, with a hover background of #7DD798, and both words should be colored in #FFFFFF. I want it to look like the example below:

Any suggestions on how I can achieve this?

jsfiddle: http://jsfiddle.net/WwY2v/

Thank you!

htmlcssbackground

Answer №1

To target specific <li> elements and change their color to white, you can use the nth-child() pseudo-class along with specifying the <strong> element after them.

Check out the updated fiddle here: http://jsfiddle.net/WwY2v/2/

I added the following CSS:

#mo-stats-r2 li:nth-child(4n + 1):hover {
   background: #4EC772;
}

#mo-stats-r2 li:nth-child(4n + 1) strong:hover {
   color: white;
}

Answer №2

To customize the required elements, simply apply a class as shown below:

<li class='custom'><strong>Name</strong></li>
...
...
<li class='custom'><strong>Details</strong></li>

Next, utilize the following CSS styles:

.custom {
   color:#333333; /* default text color */
   background-color:#FFCC00; /* default bg color */
}
.custom:hover, .custom:focus {
   color:#FFFFFF; /* hover text color */
   background-color:#FF9900; /* hover bg color */
}

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

Using null or undefined for ternary operator formatting in React applications

When styling a component, what should be used if a specific condition is not fulfilled: null, undefined, or something else? For example: errorStyle: { right: locale === Locales.ARABIC ? 0 : null, left: locale !== Locales.ARABIC ? 0 : null, .. ...

javascriptcssreact-native

The modal feature is malfunctioning on a dynamic Flask website across all web browsers

I've encountered a peculiar issue while developing a Flask website that involves the functionality of a Bootstrap modal. This problem is consistent across different browsers like Firefox, Chrome, and Safari. On the main route of my website, users can ...

pythonhtmlflaskbootstrap-modalbootstrap-5

Using Javascript values within HTML tags

Despite the abundance of posts on this topic, I haven't been able to find a solution to my specific issue. My goal is to set a JS variable as the value of an HTML attribute: <script> var screenWidth = screen.width </script> <img src= ...

javascripthtmlvariables

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

The issue: Upon page load, some images are still processing and not displaying (even though the image URLs are known). The resolution: To address this problem, a customized directive was developed to showcase a loading spinner as a placeholder until the i ...

javascripthtmlangularjsinternet-explorer

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

javascripthtmlcss

The custom bullet points are not appearing correctly

I've been attempting to design a custom bullet list, but it doesn't look quite right as I had hoped. The issue is that the spacing appears too close, you can see an example HERE Any suggestions would be greatly appreciated. Thank you ...

csshtml-lists

Classes for defining specific breakpoints in Bootstrap's grid system

Is it possible to create a Bootstrap class that applies specifically to certain breakpoints? I am aware of classes like col-sm-2 col-md-4, but I am looking for something that allows me to set the width of an element. Currently, to set the width to 100%, ...

csstwitter-bootstrapclassbootstrap-4

The body background position center does not function properly in Internet Explorer

I'm currently working on a website and facing some issues with the background-position property in CSS. Here is the code snippet that's giving me trouble: body { background-color: Black; background-image: url(images/background_ui.png); backg ...

htmlcssbrowser

The Bootstrap Library reference causes the anchor hover function to malfunction

Feeling frustrated after encountering an issue where the Bootstrap button class interferes with the hover function in standard CSS. Decided to create a custom solution by adding a grey box next to the button to display hover information instead of using t ...

htmlcsstwitter-bootstrap

The radio button seems to be unable to retain its selected value

Hey, I'm encountering an issue with my radio button in a Django template. It works fine initially, but when I update the form, the radio button doesn't retain its selected values. Below is the code snippet: <div class="span4" style="text-alig ...

htmldjangoradio-button

"Integrating backgrounds into divs disrupts the overall design aesthetic

One of the challenges I faced was trying to space out the three columns in my Bootstrap row while also splitting each column into two parts. After doing some research, here's the solution I came up with: <div class="container row h-100 mx-auto ...

htmlcsstwitter-bootstrapbootstrap-4

Step by step guide on incorporating two background images in a single header

I'm looking to create a header with a background image that appears twice, like this: To achieve the effect, I added opacity of 0.5 to one of the images, but it is affecting everything in my header including text and logo. Is there a way to prevent t ...

htmlcssbootstrap-4

PHP - Sending selected option value to index.php to add new user

In my nuevo.php file, which translates to 'new client', I have set up a form to insert data into a MySQL database. The form includes various input fields such as: <label for="Nombre">Nombre : </label><br/> <input width="50" ...

phphtmlmysql

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

javascriptjqueryhtmlcss

Mastering the precise placement of Angular-UI Bootstrap popovers: A step-by-step guide

I have created a simple Angular-UI popover in my application. However, the predefined popover-placement options are not meeting my requirements. I want the placement of my popover to be at the bottom, as indicated in my HTML notes below. Unfortunately, t ...

javascripthtmlcssangularjsangular-ui-bootstrap

Accessing the id within both objects is proving to be a challenge for me

I'm facing an issue with accessing and posting values of the id within Position and Department in Angular. It seems like the id is not being accessed correctly. addEmployee.model.ts export class AddEmployee { Position: { id: string; }; De ...

javascripthtmlangulartypescript

Text flickering unexpectedly during hover animation in Bootstrap

Encountered a peculiar issue where dark colors flicker during animation. Link to codepen Adding -webkit-backface-visibility: hidden partially resolves the problem, but it also affects font appearance by making it tighter and brighter. This issue is obser ...

cssbootstrap-4

<p> proper style can only be achieved with the addition of a background color</p

As I work on my mobile site, I am relying on CSS to ensure everything is as flexible and adaptable as possible. One issue that has been puzzling me is related to a <p> element within a div container. The goal is for the paragraph to span the entire ...

androidcssandroid-emulatorandroid-browser

Add an inset box shadow to the image tag

I'm attempting to achieve an embossed effect on an image, similar to a polaroid. I want a box-shadow on the top and left edges insetted to the picture. However, I'm having trouble getting it to work. Could this be a browser issue? I've crea ...

htmlcsscross-browser