10

is it possible to change font color across several divs and spans with css?

For example, I have HTML that goes like this:

some text ### some text 
<div> some text in div</div>
some text 
<div> some text
  <span>some text</span>
</div>
some ### more text

Is there a way to change the color of the text to, let's say, red between the ### marks?

PS. The question is not about scripting, the question about the resulting markup/css itself.

8
  • 1
    No. The fourth some text isn't inside of any element, so there is no way to target it specifically.
    – Blender
    Oct 8, 2011 at 4:41
  • 1
    Not without scripting or adding more elements Oct 8, 2011 at 4:42
  • and neither is the first. that's what the question is all about. Oct 8, 2011 at 4:43
  • CSS can't parse text. It is very specific and precise, so to answer your question, no.
    – Blender
    Oct 8, 2011 at 4:45
  • @JasonGennaro adding WHAT elements? Oct 8, 2011 at 4:45

2 Answers 2

25

I'm not exactly sure what you're asking, so let's take the opportunity to go over some CSS basics:

This CSS will apply to all div tags:

div
{
    color: red;
}

This CSS will apply to all span tags inside a div:

div span
{
    color: red;
}

This CSS will apply to all div tags and all span tags:

div, span
{
    color: red;
}

If you want a CSS rule to apply to a certain section of code regardless of the elements in it, then you can put it in a wrapper, like so:

<div class="Wrapper">
    <!-- Lots of different tags in here -->
</div>

Then, you can apply this CSS rule to match all tags of any type inside a div with class Wrapper:

div.Wrapper *
{
    color: red;
}
5
  • 1
    But the css Wrapper will not override the colors for the divs inside it, would it? Oct 8, 2011 at 4:52
  • In CSS, the most specific rule always takes precedence. So, if the color for the divs was specified in the rule for body, then yes, it would, because a tag with a specific class is more specific than just a tag. But if you had another rule for div.Wrapper div, then that would apply over a rule for div.Wrapper *, since a div is more specific than any tag (*). Oct 8, 2011 at 4:54
  • so the simple answer to my question as to whether it is possible to override those more specific classes with something general, is no, correct? Oct 8, 2011 at 4:55
  • Actually, it is. If you want to force a rule to not be overridden, you can add !important one the same line, but after the semicolon of the rule. Oct 8, 2011 at 4:57
  • so it would go to in the .wrapper { color:red; !imporant }? Oct 8, 2011 at 4:59
1

Always wrap the text like in your example in span tag. Don't throw the text like that. With that said, in general you can specify in .css file color property for span.

span{ color: Red }

But if you want specific span in a div to have a specific color then -

<div class="someClass">
    <span>some text</span>
</div>

In .css,

.someClass { /* properties for the div */ }
.someClass span { color: Blue; /* other font properties */ }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.