When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element’s parent based on selector?
To look up the element tree and find a parent by selector, you can use HTMLElement‘s closest method:
// Our sample element is an "a" tag that matches ul > li > a
const link = document.querySelector('li a');
const list = a.closest('ul');
closest looks up the ancestor chain to find a matching parent element — the opposite of traditional CSS selectors. You can provide closest a simple or complex selector to look upward for!
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
6 Things You Didn’t Know About Firefox OS
Firefox OS is all over the tech news and for good reason: Mozilla’s finally given web developers the platform that they need to create apps the way they’ve been creating them for years — with CSS, HTML, and JavaScript. Firefox OS has been rapidly improving…
MooTools-Like Element Creation in jQuery
I really dislike jQuery’s element creation syntax. It’s basically the same as typing out HTML but within a JavaScript string…ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out…
:valid, :invalid, and :required CSS Pseudo Classes
Let’s be honest, form validation with JavaScript can be a real bitch. On a real basic level, however, it’s not that bad. HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching…
[ad_2]
Source link
