How to style an element only if it contains a specific element with a specific class [duplicate]
How to style an element only if it contains a specific element with a specific class [duplicate]
This question already has an answer here:
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
parent
col
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
@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!
– VicJordan
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
has
parent
col
col
parent
4 Answers
4
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>
In JQuery you can use the :has selector, like this:
:has
$('.parent:has(.col)').css(/* your css */);
@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 1:57
@DanielThompson The answer was edited. It originally used only a plain CSS selector.
– CertainPerformance
Sep 11 '18 at 1: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 2:00
Below are two options to do it using jQuery:
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>
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 1:52
Downvoter... could you please specify the reason to downvote? I will improve that. Thanks!
– VicJordan
Sep 11 '18 at 13:51
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() + "%");
);
yes I did and did use it as inspiration for my final solution
– TheRuler
Sep 11 '18 at 9:13