Choosing specific child elements based on their css attribute valuesUnique: "Targeting

Question

Choosing specific child elements based on their css attribute valuesUnique: "Targeting

I am attempting to customize the appearance of any child divs with the class 'header' that are within parent divs with a class of 'recipes'.

I understand that I could simply target .category-recipes .header, but the parent div may vary depending on the user's location. For example, it could be 'category-recipes' on a category page or 'single-page-recipes' on a single post page.

Here is a simplified example of what a page structure might look like:

<div class="category-recipes">

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

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

I attempted to implement this style, but it did not have the desired effect.

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

Is there a way to target a child or parent element using this type of selector?

css wordpress css-selectors

Answer 1

Answer №1

Here is the working solution: https://jsfiddle.net/09zkqatx/

I followed the instructions exactly as you described.

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

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

Answer 2

Here is the working solution: https://jsfiddle.net/09zkqatx/

I followed the instructions exactly as you described.

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

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

Answer 3

Answer №2

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

This code is inspired by a solution I found on

If you prefer, you can achieve the same result using JavaScript like this

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

You can then modify the style of the element using JavaScript.

Answer 4

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

This code is inspired by a solution I found on

If you prefer, you can achieve the same result using JavaScript like this

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

You can then modify the style of the element using JavaScript.

Answer 5

Answer №3

To achieve your desired outcome, consider using a distinctive shared class for all 'recipes'. Here's an example:

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

Similarly, create a separate class 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 -->

To style the headers within these code snippets, apply the following CSS:

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

If adding a common class is not feasible, you can use a simple JavaScript snippet to accomplish this:

var el = document.getElementsByClassName('header')[0];
// First, check if the parent node has a class containing 'recipes'
if(el.parentNode.classList.toString().match(/recipes/)) {
    // Get the first child with class header and adjust its styling
    el.style.marginBottom = "40px"; 
}

Feel free to explore the functionality in the provided JSFiddle link - http://jsfiddle.net/xLzagpmv/4/

Answer 6

To achieve your desired outcome, consider using a distinctive shared class for all 'recipes'. Here's an example:

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

Similarly, create a separate class 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 -->

To style the headers within these code snippets, apply the following CSS:

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

If adding a common class is not feasible, you can use a simple JavaScript snippet to accomplish this:

var el = document.getElementsByClassName('header')[0];
// First, check if the parent node has a class containing 'recipes'
if(el.parentNode.classList.toString().match(/recipes/)) {
    // Get the first child with class header and adjust its styling
    el.style.marginBottom = "40px"; 
}

Feel free to explore the functionality in the provided JSFiddle link - http://jsfiddle.net/xLzagpmv/4/

Choosing specific child elements based on their css attribute valuesUnique: "Targeting

Answer №1

Answer №2

Answer №3

Similar questions

The CSS class name is not having any impact on the React.js components

Experiencing difficulty in retrieving the title of the latest post

Yet again faced with an annoying gap between table rows and cells, for the 532nd instance

Expand the table in the initial state by using CSS to collapse the tree

Looking for a reliable CSS aggregator for .Net that can merge and minimize style sheets effectively?

I am unable to make any changes to the CSS in the WordPress code that is already integrated

Is there an automatic bottom padding feature?

Tips on implementing .on() with querySelector in jquery?

Is it possible to use styled-components to specifically style a child class within a component?

Transitioning React Hover Navbar Design

Module not found in Node.js environment (webpack)

Move the button text back to its original position with animation

Transferring information from template to associated component

Structured chat interface with unchanging top and bottom sections

What's the best way to adjust the card column for mobile view resizing?

Incorporating a personalized post type or post into your Woocommerce store

Spotting the Visible Element; Detecting the Element in

What methods does Coinbase use to achieve this effect? Is it possible to recreate it in a React application? (Dropdown menu positioned relative to a button on hover or click

Exploring innovative CSS/Javascript techniques for creating intricate drawings

The Angular Material Tree component is not rendering properly in an Angular tutorial demonstration