css change color after particular HTML tag

Question

I am not better in CSS. I have to change the font color after particular tag. Eg.

<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 is here that i have to change all the '<strong>my title</strong>' to some color only which comes next to <li> tags Not in any other places

So i wrote in css

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

but it is not changing.

Answer 1

To only change color on direct first childs.

Try this:

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

The > operator means that it will select only the matching children that are a direct child (thus one level deep) of the defined parent, instead of matching all children on all levels from the defined parent.

Credits

JSFiddle Demo

Thanks to @MiljanPuzović

Answer 2

Demo

ul li strong
{
  color: red;
}

It will change all strong tags that is placed under li.

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

If you want to change only first strong tag , u can use this

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

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

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

If you want to change all the strong tags that comes under 'showContent', U have to prepend all the the above css with .showContent

Answer 3

You can use the first-child attribute to set an color of the first element strong, ex:

strong:first-child{
   color: blue;
}

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

Answer 4

You can do

.showContent ul li strong
{
    color: red;
}

You can look demo here .

Answer 5

Then you can try like this: DEMO

CSS:

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

Answer 6

I'm going to approach this from a different angle.

You are talking about My Title suggets a heading of some sort, so maybe use an hx tag instead. An alternate would be to use a span with a "title" class.

Using an 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;
}