Using parent selectors in CSS

I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the parent selector instantly peaked my interest.

Being able…


This content originally appeared on Ugly Duck and was authored by Bradley Taunt

I recently saw a Twitter thread posted by Tommy Hodgins on implementing highly requested styling features in CSS with only a minimal amount of JavaScript. Many of his examples are great, but the parent selector instantly peaked my interest.

Being able to target an element’s parent always becomes a minor annoyance (since vanilla CSS does not support it) - so you always end up having to do something a little ugly like:

var el = document.getElementById('custom-div');
var parent = el.closest(selectors);

And then add any custom styling to the parent element directly in JavaScript - or toggle a class which opens a whole other can of worms.

Save the day with jsincss-parent-selector and qaffeine

By using the jsincss-parent-selector and qaffeine plugins we can target an element’s parent in CSS without breaking a sweat. Let’s break it down:

Import the packages

npm install jsincss-parent-selector qaffeine

HTML (ex. index.html)

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="output.css">
    </head>
    <body>
        <header>
            <main>
                <h2>This is a header</h2>
            </main>
        </header>
    </body>
    <script src=output.js></script>
</html>

JavaScript (ex. input.js)

const qaffeine = require('qaffeine')
const parent = require('jsincss-parent-selector')

qaffeine(
  {
    stylesheet: {},
    rules: {
      parent
    }
  },
  'input.css',
  'output.js',
  'output.css'
)

CSS (ex. input.css)

header {
    display: block;
}
main[--js-parent] {
    background: blue;
}

Then simply run node against your js file. That’s it! I would also suggest checking out Tommy’s video covering this topic if you prefer to follow along.


This content originally appeared on Ugly Duck and was authored by Bradley Taunt


Print Share Comment Cite Upload Translate Updates
APA

Bradley Taunt | Sciencx (2018-12-19T00:00:00+00:00) Using parent selectors in CSS. Retrieved from https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/

MLA
" » Using parent selectors in CSS." Bradley Taunt | Sciencx - Wednesday December 19, 2018, https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/
HARVARD
Bradley Taunt | Sciencx Wednesday December 19, 2018 » Using parent selectors in CSS., viewed ,<https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/>
VANCOUVER
Bradley Taunt | Sciencx - » Using parent selectors in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/
CHICAGO
" » Using parent selectors in CSS." Bradley Taunt | Sciencx - Accessed . https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/
IEEE
" » Using parent selectors in CSS." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/. [Accessed: ]
rf:citation
» Using parent selectors in CSS | Bradley Taunt | Sciencx | https://www.scien.cx/2018/12/19/using-parent-selectors-in-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts