CODEWITHSUNDEEP
css
hello design
hello design

Reputation: 21

How to apply different css to two divs with sames classes within a div?

<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

How can I apply different CSS to .custom-html-widget DIV? I am unable to add a unique class to the DIVs.

Upvotes: 0

Views: 62

Answers (5)

agravat.in
agravat.in

Reputation: 573

you can use pseudo-class to do that. for more information you can checkout this document.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child or you can search on google about pseudo-class in css.

Upvotes: 1

hungerstar
hungerstar

Reputation: 21685

You can use :nth-child:

.custom-html-widget:nth-child( 3 ) {
  background-color: gold;
}
.custom-html-widget:nth-child( 4 ) {
  background-color: rebeccapurple;
}
<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

This works by selecting the third and fourth child element of .section-cm.

You can use :nth-of-type:

.custom-html-widget:nth-of-type( 1 ) {
  background-color: red;
}
.custom-html-widget:nth-of-type( 2 ) {
  background-color: green;
}
<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

This works because we're selecting the first and second instances of the type of element .custom-html-widget happens to be, which is a div.

You can use :first-of-type() and :last-of-type():

.custom-html-widget:first-of-type {
  background-color: seagreen;
}
.custom-html-widget:last-of-type {
  background-color: orange;
}
<div class="section-cm director-general-section">
  <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
  <img width="140" height="160" class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
  <div class="textwidget custom-html-widget">Director</div>
  <div class="textwidget custom-html-widget">hello</div>
</div>

This works because there's only two DIVs and you're selecting the first and last ones.

There's a few other too like :last-child and :nth-last-of-type().

Upvotes: 0

Arghya Chowdhury
Arghya Chowdhury

Reputation: 328

You can try out the following code

.custom-html-widget:nth-of-type(1){
 color:red;   
}

Now if you've many no of div or li item you can simply use the nth-type rule..

Upvotes: 2

Manish Patel
Manish Patel

Reputation: 3674

Used + selector if your div come one by one

.custom-html-widget {
  color: red;
}

.custom-html-widget + .custom-html-widget {
  color: blue;
}
<div class="section-cm director-general-section">
     <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
     <img width="140" height="160"  class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
     <div class="textwidget custom-html-widget">
       Director
    </div>
   <div class="textwidget custom-html-widget">hello</div>
</div>

or Used :first-of-type and :last-child

.custom-html-widget:first-of-type  {
  color: red;
}

.custom-html-widget:last-child {
  color: blue;
}
<div class="section-cm director-general-section">
     <h2 class="widget-title section-cm-heading heading--center">Director General</h2>
     <img width="140" height="160"  class="image wp-image-183  attachment-full size-full" alt="" style="max-width: 100%; height: auto;">
     <div class="textwidget custom-html-widget">
       Director
    </div>
   <div class="textwidget custom-html-widget">hello</div>
</div>

Upvotes: 1

GGO
GGO

Reputation: 2748

div.custom-html-widget:first-child(){}

To change property of the first child, otherwise for the second :

div.custom-html-widget:nth-child(2){}

Upvotes: 0

Related Questions