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

Singling out a particular navigation tab

Learn how to dynamically change a class name with JavaScript to alter the color of a navbar icon

Ways to slightly boost the default font-size values when using wicked-pdf

Container filled with a table element

Steps to fully eliminate the recent action panel from Django's administrative user interface

Tips for modifying the text color of radio button choices in HTML and CSS

Flex and Bootstrap 5.1.3 divs are not aligned with the prices

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Using a background image in CSS for horizontal rules can override other styling rules

The module cannot be located due to an error: Package path ./dist/style.css is not being exported from the package

Ways to ensure text fits nicely within a container: HTML & CSS

Is there a way to use the <form> element with the specified action attribute and a <button> element of type submit to create a button that functions as a hyperlink?

Revamp your Redux Form with a fresh new 'Field' label style

"What is the best way to use JavaScript to dynamically modify the hover color of a button

Increase or decrease the quantity of items by cloning with Jquery and dynamically changing the ID

What is the best way to halt Keyframe Animation once users have logged in?

Switching the background color in a diagonal transition when hovering from the bottom left to the top right

My website crashed after attempting to update WordPress

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

utilizing different types of text style