How to override css styles under a single class

[ash_alwazz]

I have a the following code, for which I do not have the access to change, however I can always override:

When


Saturday, November 12, 2011
  7:30 PM -   9:00 PM
Eastern Time

I want to add different colors to <li><h3>When</h3></li> and <li><p>Saturday, November 12, 2011<br/> 7:30 PM – 9:00 PM<br/>Eastern Time</p>

I have used the following method to override: .details { color: #0066CC;}
But both of them are changing to the same color. Does anyone know how I can override to apply different colors to the different li tags.

[chrisburton]

@ash_alwazz – You could give each a class.

HTML

Saturday, November 12, 2011


7:30 PM - 9:00 PM


Eastern Time

CSS

.date {color: blue;}

.time {color: black;}

.time-zone {color: red;}

[rjc]

Depending on what browser levels you want to support:

ul.details li:first-child { color:red; }

ul.details li:last-child { color:blue; }

or more widely:

ul.details li h3 { color: red; }

ul.details li p { color: blue: }

The html you have really needs more structure, the “When” really should be some kind of label to the time and date rather than a list item in itself.

[chrisburton]

@rjc – I disagree. It seems like this person is creating an invitational theme. This means “when” should be a heading. However, “when” should not be wrapped inside a list item.

@ash_alwazz – maybe you can show us an image so we can better help you with the semantics of your code.

When




...


...


...

CSS

.when h3 {color: red;}

.date {color: orange;}

.time {color: blue;}

.time-zone {color: purple;}

[Johnnyb]

@ChristopherBurton, although your HTML is more appropriate for what they’re trying to do, they noted in their post that they weren’t able to change any of the HTML unfortunately.

As that’s the case then using :first-child is probably the best way. Or if you want really deep browser support you could throw in some jquery: $(“.details ul li:nth-child(1)”).css(‘color’, ‘orange’);

[chrisburton]

My mistake. I misread that as they didn’t know how to change.

[joshuanhibbert]

Use the following (replace colors as required):

.details h3 {

color: #06c;

}

.details p {

color: #333;

}

There is no need to use pseudo-classes (like first-child) or JavaScript for this simple problem.

[chrisburton]

Does anyone know how I can override to apply different colors to the different li tags.

@joshuanhibbert your option only allows to change the h3 and the list items as a whole.

@rjc has the best solution using pseudo selectors.

[joshuanhibbert]

@ChristopherBurton Based on the OP’s knowledge level I believe that they actually phrased that question incorrectly. In this case changing the color of the heading/paragraph is identical to changing the color of li:first-child/last-child but has better browser support. There is a good chance I am wrong though.

[Author]

Posts