How to style an element only if it contains a specific element with a specific class

Question

I have the following element:

<div class="parent">
    <div class="col">MyColumn</div>
</div>

I want to style the parent class only if it contains a class with class col

yes I did and did use it as inspiration for my final solution — SteinTheRuler, Sep 11 '18 at 09:13
@TemaniAfif how it is duplicate? Please just don't check the title but also try to understand the actual requirement. For more details please check the answer posted by OP. Thanks! — Vikasdeep Singh, Sep 11 '18 at 13:29
@VicJordan well, check your answer and you will see how it's a duplicate .. you used the `has` selector (one of the answer in the duplicate)... then if *you* read again the question you will see it's about styling `parent` if it contains `col` which means style the *parent element* of `col` that contains `parent` which means we need to have a **parent selector** ... don't tell me that all the answers of the duplicate don't apply here? if you are not convinced I can use all the answers there to this particular case. And again, your answer is already similar to the answer already provided — Temani Afif, Sep 11 '18 at 16:59

Vikasdeep Singh · Answer 1 · 2018-09-11T02:08:29.673

0

Below are two options to do it using jQuery:

Option 1

$('.parent').has('.col').addClass('style');

.style {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col">MyColumn</div>
</div>

Option 2

if ($(".col").parents(".parent").length == 1) {
  // add style here
  $(".parent").css({'background': "red"});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="col">MyColumn</div>
</div>

edited Sep 11 '18 at 02:08

answered Sep 11 '18 at 00:59

Vikasdeep Singh

17,777
9
70
93

I think this is good. but i have another solution. You use jQuery to add a class for parent and style for this class. It will better – Bai Nguyen Sep 11 '18 at 01:52
Downvoter... could you please specify the reason to downvote? I will improve that. Thanks! – Vikasdeep Singh Sep 11 '18 at 13:51

score 0 · Answer 2 · answered Sep 11 '18 at 01:19

Threw together a fairly legacy compatible JavaScript version:

var parents = document.querySelectorAll('.parent')

for (var i = 0; i < parents.length; i++) {
  for (var j = 0; j < parents[i].children.length; j++) {
    if (hasClass(parents[i].children[j], 'col')) {
      updateCss(parents[i])
    }
  }
}

function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

function updateCss (parent) {
  // whatever you want to add here...
  parent.style.color = 'red';
}

.parent {
  margin: 15px;
  outline: 1px dotted black;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="parent">
      <div class="col">MyColumn</div>
    </div>
    <div class="parent">
      <div class="something-else">not column</div>
      <div class="col">MyColumn</div>
    </div>
    <div class="parent">
      <div class="something-else">not column</div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Poul Bak · Answer 3 · 2018-09-11T01:43:41.767

0

In JQuery you can use the :has selector, like this:

$('.parent:has(.col)').css(/* your css */);

edited Sep 11 '18 at 01:43

answered Sep 11 '18 at 01:28

Poul Bak

7,390
4
20
40

@CertainPerformance wouldn't JQuery use polyfills for the browser support? It's just the browser CSS spec that doesn't include that selector yet I thought. – Daniel Thompson Sep 11 '18 at 01:57
2

@DanielThompson The answer was edited. It originally used only a plain CSS selector. – CertainPerformance Sep 11 '18 at 01:59
@CertainPerformance is right, it won't Work in pure css, that's why I edited it to use JQuery, which Works in all browsers. – Poul Bak Sep 11 '18 at 02:00

score 0 · Answer 4 · edited Sep 11 '18 at 13:31

this is what I've come up with so far. what I'm trying to do is to spread the div's with class COL in the remaining space after the size specific col's.

it's still not perfect and needs a little tweaking, but a step in the right direction.

var mediaBase = parseFloat(8.33333);

    $.each($("div.row"), function (index) {
        var gens = 0;
        var total = 0;

        $.each($(this).find("div[class^='col']"), function (ii) {
            if (total > 100) {
                $(this).hide();
            }
            else {
                if ($(this).attr("class").indexOf("-") > 0) {
                    let tmp = $(this).attr("class");
                    tmp = parseInt(tmp.slice(tmp.lastIndexOf("-") + 1));

                    total += parseFloat(mediaBase * tmp);
                }
                else {
                    gens++;
                }
            }
        });

        if (gens > 0 && total < 100) {
            let val = (100 - total) / gens;

            if (total === 0) {
                val = 100 / gens;
            }

            $(this).find("div.col").css("width", val.toString() + "%");
        }
    });

How to style an element only if it contains a specific element with a specific class

4 Answers4