Geek Answers Handbook

Css changes color after specific HTML tag

I'm not better at CSS. I have to change the font color after a certain tag. For instance.

<div class='showContent'>
    <ul>
    <li><span style='color:green;'><strong>Advantages</strong</span><strong>my title :</strong> My message </li> <!-- i should not change this because <strong> tag is not next to <li> tag , here <span> tag comes next to <li> -->
    <li><strong>my title :</strong> My message </li> <!-- i should change this title <strong> tag color because this comes next to <li> tag -->
    <li><strong>My title1 : </strong> My message my message <strong>My message in bold</strong> my message again </li>
    <li><span style='color:red;'>Disadvantages</span><strong>my title :</strong> My message </li>
    <li><strong>My title1 : </strong> My message my message <strong><a href=''>My message in bold</a></strong> my message again </li>
    </ul>
</div>

So, what is my requirement, I have to change everything '<strong>my title</strong>'to some color, only the following <li> tagsNot in other places

So I wrote in css

.showContent li strong:first-line
{
   color : blue;
}

but he does not change.

+4
source share
6 answers

Change color only for direct first children.

Try the following:

.showContent ul li > strong:first-child {
   color : blue;
}

Operator> means that he will only select the appropriate children who are the direct child (thus, one level) of a particular parent, instead of matching all children at all levels from certain ancestors.

Loans

JSFiddle Demo

@MiljanPuzović

+3

ul li strong
{
  color: red;
}

, .

[ ] (http://jsfiddle.net/GopsAB/458aR/2/)

,

ul li strong:nth-of-type(1)
{
  color: red;
}

[ ] (http://jsfiddle.net/GopsAB/458aR/4/)

ul li strong:first-child
{
  color: red;
}

, "showContent", U css .showContent

+1

first-child , :

strong:first-child{
   color: blue;
}

. : http://www.w3schools.com/cssref/sel_firstchild.asp

0

.showContent ul li strong
{
    color: red;
}

.

0

Then you can try the following: DEMO

CSS

ul li span + strong
{
    color: blue;
}
ul li strong
{
    color: #c47400;
}
0
source

I approach this from a different angle.

You say that My Title offers some kind of title, so maybe use a tag instead hx. An alternative would be to use a range with the "title" class.

Using the h3 tag

<div class='showContent'>
    <ul>
    <li><span style='color:green;'>Advantages</span><h3>my title :</h3> My message </li>
    <li><h3>my title :</h3> My message </li>
    <li><h3>My title1 : </h3> My message my message <strong>My message in bold</strong> my message again </li>
    <li><span style='color:red;'>Disadvantages</span><h3>my title :</h3> My message </li>
    <li><h3>My title1 : </h3> My message my message <strong><a href=''>My message in bold</a></strong> my message again </li>
    </ul>
</div>

CSS

.showContent ul h3
{
    font-weight:bold;
    display:inline;
    color:blue;
    font-size:1em;
}

.showContent ul *+h3
{
    color:inherit;
}
0
source

More articles:


All Articles