Selecting child elements with css attribute value selector

Question

i'm trying to style any .header child divs that inside any parent divs with 'recipes' as its class.

i know i can just get .category-recipes .header but they'll be a few parent div will change depending on where the user is. eg. 'category-recipes on category page, or 'single-page-recipes' on single posts page.

here's a simplified version of what a page looks like

<div class="category-recipes">

  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>

</div> <!-- end of category -->

i tried it and it didnt work.

div[class*="recipes"] .header{
  margin-bottom: 40px;
}

is it possible to get a child or parent in with this kind of selector?

Not sure what you meant by there will be few divs? Where are those? They won't be affected in your current markup if you use `.category-recipes .header` — m4n0, Jul 26 '15 at 09:46
@ManojKumar on different pages, the parent class would be different. eg. single-page-recipes , category-recipes etc — wsgg, Jul 26 '15 at 09:47
@Dmitriy just a typo error when i was typing this question but its fine on my code. — wsgg, Jul 26 '15 at 09:48
[Your `div[class*="recipes"]` selector works fine...](http://jsbin.com/qucumopebi/edit?html,css,output) — misterManSam, Jul 26 '15 at 09:50
strangely it only worked when i changed it to id instead of using classes like what @RachelGallen said — wsgg, Jul 26 '15 at 09:57

score 1 · Accepted Answer · answered Jul 26 '15 at 09:51

1

This works: https://jsfiddle.net/09zkqatx/

Basically, I've done all the same way you described.

div div {
    width: 50px;
    height: 50px;
    border: 1px solid black;
}

div[class*="recipes"] .header{
  margin-left: 40px;
}

answered Jul 26 '15 at 09:51

Artur Udod

4,465
1
29
58

thanks, not quite sure whats wrong with mine but it worked with div[id*="recipes"] .archive-header{ margin-bottom: 40px; } had to change the div from using a class to id – wsgg Jul 26 '15 at 09:58

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

div[class*="recipes"] div[class*="header"]{
  margin-bottom: 40px;
}

Is a spin off of what I got from https://stackoverflow.com/a/2094554/4871483

You could just use JavaScript and select like this

var parDivs = document.getElementsByClassName("category-recipes");
for(parDiv in parDivs){
    var child = parDiv.children[2];
}

And change the style from JavaScript

edited May 23 '17 at 12:06

Community

1
1

answered Jul 26 '15 at 09:48

rassa45

3,482
1
29
43

Rohit Kumar · Answer 3 · 2015-07-26T11:04:52.200

You can achieve what you want- Use a separate common class for 'recipes' For example,

<div class="category-recipes recipes">
  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>
</div> <!-- end of category -->

And also for your 'single-page-recipes',

<div class="single-page-recipes recipes">
  <div class="otherdiv"></div>
  <div class="otherdiv"></div>
  <div class="header"></div>
</div> <!-- end of single page -->

For the above codes, use the css -

div.recipes > div.header {
    margin-bottom: 40px;
}

OR, if you can't add a common class, you can use small JS snippet to achieve this -

var el = document.getElementsByClassName('header')[0];
// first check if the parent node has class with text recipes
if(el.parentNode.classList.toString().match(/recipes/)) {
    //get the first child with class header and then style it
    el.style.marginBottom = "40px"; 
}

check out the JSFiddle - http://jsfiddle.net/xLzagpmv/4/

Selecting child elements with css attribute value selector

3 Answers3