How to set CSS property in adjacent elements?

Question

I am trying to set the css style from a sibling element.

For example:

<h4 class='title'>Title</h4>
<div class='desc1'>                --> This element class is dynamic..
    <h4 class="lesson1">Test1</h4> --> This element class is dynamic..
</div>
<div class='des2'>                --> This element class is dynamic..
    <h4 class="lesson2">Test2</h4> --> This element class is dynamic..
</div>
<div class='desc3'>                --> This element class is dynamic..
    <h4 class="lesson3">Test3</h4> --> This element class is dynamic..
</div>
<div class='desc4'>                --> This element class is dynamic..
    <h4 class="lesson4">Test4</h4> --> This element class is dynamic..
</div>

CSS

.title {
    color:red;
}

.title + .desc1 {    --> only set the first element as blue. I need to set all desc
    color:blue
}

I am using Angular ng-repeat and show those h4 dynamically. Is there anyway I can use title class relation to set h4 property in my case? Thanks!

Answer 1

Try ~

.title {
  color: red;
}
.title ~ div[class^=desc] {/* class name starting with `desc` */
  color: blue
}

<h4 class='title'>Title</h4>
<div class='desc1'>
  <h4 class="lesson1">Test1</h4> 
</div>
<div class='des2'> <!-- class is not starting with `desc` -->
  <h4 class="lesson2">Test2</h4>
</div>
<div class='desc3'>
  <h4 class="lesson3">Test3</h4>
</div>
<div class='desc4'>
  <h4 class="lesson4">Test4</h4>
</div>

Answer 2

You can use a CSS atribute selector. Try [class^="desc"]. This will select all elements whose class starts with "desc".

[class^="desc"] {
  /* all elements that have classes that begin with "desc" */
  color: blue
}

<h4 class='title'>Title</h4>
<div class='desc1'>
  <h4 class="lesson1">Test1</h4> 
</div>
<div class='desc2'>
  <h4 class="lesson2">Test2</h4> 
</div>
<div class='desc3'>
  <h4 class="lesson3">Test3</h4> 
</div>
<div class='desc4'>
  <h4 class="lesson4">Test4</h4> 
</div>

Answer 3

HTML:

<div class="desc">                --> This element class is dynamic..
    <h4 class="lesson">Test1</h4> --> This element class is dynamic..
</div>
<div class="desc">                --> This element class is dynamic..
    <h4 class="lesson">Test2</h4> --> This element class is dynamic..
</div>
<div class="desc">                --> This element class is dynamic..
    <h4 class="lesson">Test2</h4> --> This element class is dynamic..
</div>
<div class="desc">                --> This element class is dynamic..
    <h4 class="lesson">Test2</h4> --> This element class is dynamic..
</div>

CSS:

.desc .lesson{
   color: blue;
}

There is no need to give each 'desc' its own unique name. You can simply have them all named the same and apply the CSS above to make all of them blue.

Answer 4

From how understand, your problem is to add a css color rule for the H4 to the immediate child of the 'title' class. Right.

Then Why not just try.

.title + div {    
    color:blue
}

This will just let you style the immediate sibling to <div class='title'>.

Which is <div class='desc'>

And if, you need to add different css rules to each of these Four desc Divs. then, you can write, something like:

/*First class desc1 */
.title + div {    
    color:#00a1ff;
}
/*First class desc2' */
.title + div + div {    
    color:#00a1ff;
}
/*First class ' desc3' */
.title + div + div + div {    
    color:#32d2db;
} 
/*First class ' desc4' */
.title + div + div + div + div {    
    color:#32d2db;
}          

Answer 5

If I understand your problem correctly, you want child h4 s to have one color and the title to have another color. If so, define color for all h4 s first, then set color for the particular

h4.title as:
h4{
color: blue;
}
h4.title{
color: red;
}

Or is it that you need to do the sibling thing and this is just a sample case?