Ways to manipulate the content of a div

Question

Ways to manipulate the content of a div

HTML

<span class = "Box">
        <div class = "active">
        <a href ="#-night">
        <span class ="list">4</span>
        <span class="locations"><?php echo $location; ?></span>
        <span class="type">Night </span>
        </a>        
        </div>
        </span>

CSS

.Box {
        white-space: nowrap;
        padding: 0px 20px;
        font-size: 110%;
        color: blue;}

        .list {
            height: 30px;
            width: 30px;
            line-height: 30px;
            -moz-border-radius: 15px; /* or 50% */
            border-radius: 15px; /* or 50% */
            text-align: center;
            display: inline-block;
            background-color: orange;
            color: blue;} 

        .locations{
            text-transform: uppercase;
            color: blue;}

        .type {
            text-transform: uppercase;
            color: blue;}

I need the font color of .list, .locations, and .type in the .active span to change to dark blue or another color. I'm not very skilled at CSS and have found no helpful information online so far. Sorry if this question is silly or if I've posted it incorrectly.

html css

Answer 1

Answer №1

.active .list,
.active .locations,
.active .type {
    color: darkBlue;
}

Sample...

.Box {
white-space: nowrap;
padding: 0px 20px;
font-size: 110%;
color: blue;}

.list {
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px; /* or 50% */
border-radius: 15px; /* or 50% */
text-align: center;
display: inline-block;
background-color: orange;
color: blue;} 

.locations{
text-transform: uppercase;
color: blue;}

.type {
text-transform: uppercase;
color: blue;}

.active .list,
.active .locations,
.active .type {
    color: darkBlue;
}

<span class = "Box">
<div class = "active">
<a href ="#-night">
<span class ="list">4</span>
<span class="locations"><?php echo $location; ?></span>
<span class="type">Night </span>
</a>        
</div>
</span>

Answer 2

.active .list,
.active .locations,
.active .type {
    color: darkBlue;
}

Sample...

.Box {
white-space: nowrap;
padding: 0px 20px;
font-size: 110%;
color: blue;}

.list {
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px; /* or 50% */
border-radius: 15px; /* or 50% */
text-align: center;
display: inline-block;
background-color: orange;
color: blue;} 

.locations{
text-transform: uppercase;
color: blue;}

.type {
text-transform: uppercase;
color: blue;}

.active .list,
.active .locations,
.active .type {
    color: darkBlue;
}

<span class = "Box">
<div class = "active">
<a href ="#-night">
<span class ="list">4</span>
<span class="locations"><?php echo $location; ?></span>
<span class="type">Night </span>
</a>        
</div>
</span>

Answer 3

Answer №2

Include the following code snippet -:

a {
    color :blue; // custom color
  }

Also, make sure to eliminate the color attribute from any other selectors.

Answer 4

Include the following code snippet -:

a {
    color :blue; // custom color
  }

Also, make sure to eliminate the color attribute from any other selectors.

Ways to manipulate the content of a div

Answer №1

Answer №2

Similar questions

What is the method used by Chrome dev tools to create CSS selectors?

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

A <div> with relative positioning is inhibiting the visibility of absolutely positioned elements without any visible overlap

Encountered an issue while implementing the post function in the REST API

Challenge with the continuity of my Html/CSS coding

Tips for showcasing an image partially with primefaces/jsf

Show the Table and Conceal the Overflow

Is it possible to deactivate an anchor tag based on the result of a conditional statement that returns a string?

The function 'find' cannot be invoked on an undefined object

How can I apply styling to Angular 2 component selector tags?

The footer is anchored at the bottom on one page but mysteriously relocates to the center on the next page

Bars of varying heights (Google Chart)

Discover the process of creating a dynamic mailto link using AJAX and HTML

What is the best way to change a date from the format DD/MM/YYYY to YYYY-MM-DD

What is the best way to eliminate a class from a jQuery UI Dialog?

Fade In Effect in Angular 2 Using SwitchCase

A guide to displaying the date retrieved from a JSON data file API request using JavaScript

Creating semantic advertisement content using HTML5 tags

Is there a way to have one element automatically expand when another is selected?

Assistance with centering elements using pure CSS in responsive web design