Using Attribute Value of a Parent in a Child Using CSS3 Attr Function

Set child element attr using an attribute of the parent using jquery

you should do

$('ul#clients-strip li a').hover(function(){
    //get the child image and change the src
    $('img', this).attr('src', $(this).data('colour'));
});

If you wan't to return to the original src when leaving you could do

var cacheSrc;
$('ul#clients-strip li a').hover(function(){
    cacheSrc = $('img', this).attr('src');
    //get the child image and change the src
    $('img', this).attr('src', $(this).data('colour'));
},
function(){
    $('img', this).attr('src',cacheSrc);
});

Apply attribute of child to parent

You can do the code below
as short as possible.

$('a>img').each(function(){
    $(this).parent().attr('href',$(this).attr('src'))
});

this will loop on each of your image under anchor and assign its src value as href value of its parent anchor

Select child element based on parent's attribute value

.outerDiv[data-Outer="true"] > .inner should do the trick.

Child attr displaying for parent pseudo

It's not possible to do this as CSS by nature (and name) cascades. So the child elements data attribute is out of scope for the parent elements pseudo element to use.

From the Mozilla Developer Network:

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the style sheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.

It depends what you're after exactly with the value of the data attribute, but you can still style things with the child element but it depends on your use case for it. If you can, move the data attribute up to the parent (if that's possible to do here).

getting attribute from parent selector is CSS using content:attr();

The attr() function can only obtain an attribute from the element that's generating the content. You won't be able to get the section element's title because it's not the element that's generating the content.

As ScottS mentions, you should really avoid having an empty heading element, as there wouldn't be a point in having it there at all then. Your best bet is to either leave out the title attribute (is it really needed?), or leave the content duplicated.

How to get attribute value of the main parent node element from a child element in javascript?

You could use closest(selector):

function getDataIdOfTheCurrentRow(event) {
    event.stopPropagation();
    const row = event.target.closest('tr');
    if(row.hasAttribute('data-id')){
      const dataID = row.getAttribute('data-id');
      // now do your thing
    }
}

Style class by attribute value (nth-child)

Since CSS support for reading values from data- attributes are still extremely limited, you cannot rely on reading the data-rating to dynamically apply :nth-child rules. However, since you are using a CSS preprocessor (SASS as you mentioned), you can use a @for loop to generate all the necessary selectors required. The caveat to this solution is that you will need to pre-determinate the maximum rating (in this case, it is 5).

The SASS code below (also available as a gist) will do more or less what you're intending to achieve. To select for the first x elements, you can use the :nth-child(-n+x) selector rule.

1. Use the SASS @for loop to iterate through all possible star ratings (1 through x, where x is 5 in your case)
2. Generate a selector that targets the .rating[data-rating='x']
3. In each .rating selector, you use the nth-child trick above to style the first x stars.

// Some basic configuration
$stars: 5;
$star-color: #FFD464;

// Baes styles for unfilled stars
.rating {
  .star {
    color: #ccc;
  }
}

// Create custom nth-child selectors for each data-rating value
@for $i from 1 through $stars {
  .rating[data-rating='#{$i}'] {
    .star:nth-child(-n+#{$i}) {
      color: $star-color;
    }
  }
}

Disclaimer: The only major drawback of this method is that it gets bloated quickly when you have too many stars. Having 5 stars is not an issue, since you will only generate 5 different sets of rules (plus with the adent of gzipping and CSS minification, the code bloat does not incur a heavy overhead). Imagine if you have a 10-star rating system, the selector rules will be overly verbose: in that case, you might want to consider a JS-based solution.

Here is a proof-of-concept example using the compiled SASS code above:

.rating .star {  color: #ccc;}
.rating[data-rating='1'] .star:nth-child(-n+1) {  color: #FFD464;}
.rating[data-rating='2'] .star:nth-child(-n+2) {  color: #FFD464;}
.rating[data-rating='3'] .star:nth-child(-n+3) {  color: #FFD464;}
.rating[data-rating='4'] .star:nth-child(-n+4) {  color: #FFD464;}
.rating[data-rating='5'] .star:nth-child(-n+5) {  color: #FFD464;}

<div class="container">    <div class="rating" data-rating="1">        <span class="star" data-score='1'>★</span>        <span class="star" data-score='2'>★</span>        <span class="star" data-score='3'>★</span>        <span class="star" data-score='4'>★</span>        <span class="star" data-score='5'>★</span>    </div>    <div class="rating" data-rating="2">        <span class="star" data-score='1'>★</span>        <span class="star" data-score='2'>★</span>        <span class="star" data-score='3'>★</span>        <span class="star" data-score='4'>★</span>        <span class="star" data-score='5'>★</span>    </div>    <div class="rating" data-rating="3">        <span class="star" data-score='1'>★</span>        <span class="star" data-score='2'>★</span>        <span class="star" data-score='3'>★</span>        <span class="star" data-score='4'>★</span>        <span class="star" data-score='5'>★</span>    </div>    <div class="rating" data-rating="4">        <span class="star" data-score='1'>★</span>        <span class="star" data-score='2'>★</span>        <span class="star" data-score='3'>★</span>        <span class="star" data-score='4'>★</span>        <span class="star" data-score='5'>★</span>    </div>    <div class="rating" data-rating="5">        <span class="star" data-score='1'>★</span>        <span class="star" data-score='2'>★</span>        <span class="star" data-score='3'>★</span>        <span class="star" data-score='4'>★</span>        <span class="star" data-score='5'>★</span>    </div></div>

Finding the data attribute value of a parent div several levels up with jQuery

You want

var customerId = $(this).closest("div[data-id]").attr('data-id');

:has(*[data-id]) doesn't match an element with that attribute. It matches an element that contains another element with that attribute. The element that's matched probably doesn't have this same attribute, which would explain why :has(*[data-id]) doesn't work. For instance, it would match the outer div, not the inner div, in the following:

<div>
  <div data-id="@customer.Id"></div>
</div>

To match an element that has an attribute, simply attach the attribute selector directly without using :has().

---

Related Topics