How to apply style to immedate tag and not after text

Question

I am bit concerned, how can I add style to only immediate child and not after the some plain text.

Ex.

I have structure like: 1)

<div>
plain text lorm ipusm
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

If I add rule for ul should not apply. If I set background then it should not be applied here as it has some text before ul "plain txt lorm ipsum"

and 2)

<div>
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

If I add rule for ul should apply to this ul as there is not text before it.

I dont have any css selector, wants to apply style to ul immediate to div as in 2nd example not as in 1st. I mean in first ex. inside div there are some text and then ul. In that case style should not be applied and in 2nd ul is immediate to div, style should applied to only first ul.

I have tried div > ul:first-child but it applicable in both the cases

In short, style should not apply to the ul if there is any text in between div and ul

Answer 1

You can try something like assuming you are going to have ul as only n^th (2) child

div:nth-child(2) >ul:first-child{
  color : red;
}

<div>
plain text lorm ipusm
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>
========================================
<div>
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

Answer 2

You could check if the div has an immediate text then decide to add the style or not, like :

$("div").each(function(){
  if( $(this).clone().children().remove().end().text().trim() !== ""){
    console.log('Do not add style');
  }else{
    console.log('Add style');
  }
});

Hope this helps.

Pure JS solution :

var divs = document.querySelectorAll('div');

for (var i = 0; i < divs.length; i++) {
  var element = divs[i], text = '';

  for (var j = 0; j < element.childNodes.length; ++j)
    if (element.childNodes[i].nodeType === 3)
      text += element.childNodes[j].textContent;

  if (text.trim() === "") {
    element.querySelector('ul').style.backgroundColor = 'green';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  plain text lorm ipusm
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>

<div>
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>

jQuery Solution :

$("div").each(function(){
  if( $(this).clone().children().remove().end().text().trim() === ""){
    $('ul:first-of-type',this).css('background-color','green');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  plain text lorm ipusm
  <ul><li>test content</li></ul>
  <ul><li>test content</li></ul>
</div>

<div>
  <ul><li>test content</li></ul>
  <ul><li>test content</li></ul>
</div>

Answer 3

Use first-of-type. it works with the parent so effect only immediate comes tag.

div>ul:first-of-type {
  background: tomato;
}

<div>
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>
<br/>
<br/>
<div>
  plain text lorm ipusm
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>