CODEWITHSUNDEEP
csscss-selectors
dEL
dEL

Reputation: 502

apply css to only 1st unknown element of div

I want to apply margin top:15px to only 1st element of this div

I am pulling ckeditor data from database that is why 1st element is unpredictable

This is my div structure , 

<div class="ckeditordata">

//1st element is unknown
//can be <p>, <ul>, <ol>
</div>

Upvotes: 3

Views: 2042

Answers (5)

Sancode
Sancode

Reputation: 35

.selector> *:nth-child(1) {
  color: green;
  margin-top: 20px;
  font-weight: 600;
}
<div class="selector">
  <p>TEXT</p>
  <p>TEXT</p>
  <p>TEXT</p>
</div>

Upvotes: 1

Anonymous
Anonymous

Reputation: 10216

You can use css > child selector with :nth-child(1) to apply css only for 1st child like this:

.ckeditordata > *:nth-child(1) {
  color: red;
  margin-top: 15px;
}
<div class="ckeditordata">
  <p>TEXT</p>
  <p>TEXT</p>
  <p>TEXT</p>
</div>

Upvotes: 2

Bill Criswell
Bill Criswell

Reputation: 32921

You can use :first-child.

.ckeditordata > :first-child {
  margin-top: 15px;
}

Quick demo: https://jsfiddle.net/crswll/1re2p8sp/2/

Upvotes: 9

prajakta
prajakta

Reputation: 162

You can use through jQuery also. Check this code, if it works:

$('.ckeditordata').children(':nth-child(1)').css('margin-top','15px');

Upvotes: 0

Alfred
Alfred

Reputation: 21386

Try;

.ckeditordata :first-child {
    margin top:15px
}

Upvotes: 1

Related Questions