CSS dominance problem

Discussion in 'CSS' started by Aven, Dec 7, 2012.

0
  1. #1
    Hello all,

    Can someone please help with this problem?

    How can I make one CSS dominant over the other?

    This is the CSS code.

    
  #content .highlight{
  background: #F7FE2E;
  }

  #content .unhighlight{
  background: #fff !important;
  }
    Code (markup):

    This is the issue.
    
<span class="unhighlight"> text text text <span class="highlight">text text</span> text text text </span>
    Code (markup):
    The highlight is dominant because it is inside. I added "!important" (as you can see in my css code) but it doesn't fix the problem.

    How can I make unhighlight dominant? Is there another element I can use instead of span? div didn't work.
     
    Last edited: Dec 7, 2012
    Aven, Dec 7, 2012 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    Try changing style="unhighlight" to class="unhighlight".
     
    Rukbat, Dec 7, 2012 IP
  3. Aven

    Aven Peon

    Messages:
    335
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry, I just edited my post.

    I did have it originally as "class". It was a typo :\

    The problem is still there.
     
    Aven, Dec 7, 2012 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #4
    It may be easier I think if...
    the 'free' unwrapped text phrases could be made as child elements,
    as follows:
    <html>
<head>
<style type="text/css">
  #content .highlight{
		background: #F7FE2E;
  }
[B]  #content .unhighlight *{
		background: #fff;
  }[/B]
</style>
</head>
<body>
	<div id="content">
		<span class="unhighlight">
			[B]<span>text text text</span>[/B]
			<span class="highlight">text text</span>
			[B]<span>text text text</span>[/B]
		</span>
	</div>
</body>
</html>
    Code (markup):
     
    hdewantara, Dec 8, 2012 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    This might sound like a stupid question, but wouldn't 'unhighlight' be the default state, and as such not NEED any stupid span with a class around it?!?

    Just saying, apply it 'unhighlight' to content, then use #content .highlight...

    Unless you have three states there, looks like a waste of code to me. Only wrap presentational markers around content that's DIFFERENT.

    Also, highlight is presentation, I'd be asking WHY is it highlighted. Is it receiving emphasis? What's making it different? Remember, HTML is for saying what things ARE, not what they look like -- a philosophy that should also be extended to your classes. A class like "Highlight" is just as bad as classes like "red" or "left" -- you might as well go back to using HTML 3.2 without CSS at that point.

    -- edit -- you could also try losing the ID selector and the !important -- that way they're equal level so the child should override the parent. Having the direct child selection changes the inheritance order.
     
    Last edited: Dec 8, 2012
    deathshadow, Dec 8, 2012 IP
  6. Akuta

    Akuta Greenhorn

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    I'm not sure if I'm reading this correctly but this has nothing to do with CSS it's HTML hierarchy...
     
    Akuta, Dec 11, 2012 IP