CODEWITHSUNDEEP
htmlcss
user3872094
user3872094

Reputation: 3351

add css to named first children

This question can be the extension to my previous question Apply CSS for first letter.

Now in my current scenario, I want to apply style for the first div with class as section-sect1's para.

Below is my HTML.

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt=""></div>
  <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
    <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
</div>

My CSS is 

.chapter .section-sect1:first-of-type .section-title + .para:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

Here When I use the below CSS.

.chapter .section-sect1 .section-title + .para:first-letter {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

it is selecting the first letter of all the section-sect1, But I want to select only the first section-sect1 of .chapter.

Here is a working fiddle. https://jsfiddle.net/8b5z8gb4/3/

please let me know how Can I fix this.

Upvotes: 2

Views: 103

Answers (3)

user4994625
user4994625

Reputation:

Another way is apply the class to all .section-sect1 and then overwrite .section-sect1 except the first using general sibling selector:

.chapter .section-sect1 .section-title + .para:first-letter {
  border: 1px solid;
  font-weight: bold;
  color: red;
}

.chapter .section-sect1 ~ .section-sect1 .section-title  + .para:first-letter {
  border:none;
  font-weight: normal;
  color: inherit;
}
<div class="chapter">
  <div class="figure"><img class="graphic" src="img.jpg" alt=""></div>
  <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
  <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
</div>

Upvotes: 0

Asim Iqbal
Asim Iqbal

Reputation: 148

If you want to give child styling then you need to put data like tree.

I am attaching example for you, here is JsFiddle:

https://jsfiddle.net/8b5z8gb4/6/

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt="">
    </div>

  <!-- Child Holder -->
  <div class="child-holder">
  <!-- First Child -->
  <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
  <!-- Second Child -->
  <div class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title 
     </div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </div>
</div>
  </div>

.chapter .child-holder .section-sect1:first-child {
 border: 1px solid;
 font-weight: bold;
 color: red;
}

Upvotes: 1

Elisabeth Hamel
Elisabeth Hamel

Reputation: 178

Unfortunately, :first-of-type doesn't work with classes, only with html tags. However in your case, you could do something like this:

.chapter .figure + .section-sect1 .section-title + .para:first-letter {
    border: 1px solid;
    font-weight: bold;
    color: red;
}

But if you can't use .figure, you will have to add a class on your first .section-sect1, or change his tag, so you can use a tag instead of a class in the css:

<div class="chapter">
  <div class="figure">
    <img class="graphic" src="img.jpg" alt=""></div>
  <section class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </section>
    <section class="section-sect1">
    <a name="CH_00001-SEC-1"></a>
    <div class="section-title">
      <span class="section-num"></span> Title</div>
    <div class="para">Text1
    </div>
    <div class="para">Text2
    </div>
  </section>

</div>


.chapter section:first-of-type .section-title + .para:first-letter {
    border: 1px solid;
    font-weight: bold;
    color: red;
}

Upvotes: 2

Related Questions