TypeScript icon, indicating that this package has built-in type declarations

    1.1.7 • Public • Published

    CssChain & ApiChain test and <css-chain> demo

    css-chain hosts ApiChain and CssChain JS. Collection API inherits the element API and Array.

    NPM version coverage

    Live demo



    html elements methods

    CssChain returns an Array inherited object which has all methods and properties of its elements. When method is called, each element would invoke this method and then same CssChain object is returned.

        function addTooltip( el ){ /* ...el.title */ }
        CssChain( '*[title]' ).forEach( el=>addTooltip( el ) )
                              .forEach( addTooltip )

    ^^ calls addTiooltip() twice for each element with title attribute and then removes this attribute

        CssChain( '*[title]', rootEL ).addEventListener( 'click', ev=> alert(ev.target.title) );

    ^^ adds event listener to all selected elements in rootEl DOM tree

        CssChain( 'a' )
            .addEventListener( 'mouseover', ev=> alert(ev.target.classList.add('hovered') ) )
            .addEventListener( 'mouseleave', ev=> alert(ev.target.classList.remove('hovered') ) )
            .addEventListener( 'focus', ev=> alert(ev.target.classList.add('focused') ) )
            .addEventListener( 'mouseleave', ev=> alert(ev.target.classList.remove('focused') ) )

    ^^ adds multiple event handlers in chainable dot notation.

    special methods

    • forEach() - same as Array.forEach returns CssChain
    • map() - same as Array.map returns new CssChain with elements from callback
    • push(...arr) - same as Array.push returns appended CssChain
    • querySelector(css) - selects 1st element, returns CssChain
    • querySelectorAll(css) - selects all children matching css , returns CssChain
    • $ - alias to querySelectorAll()
    • attr(name) (alias for getAttribute) returns 1st element attribute value or undefined for empty collection
    • attr(name, value) (alias for setAttribute) sets elements attribute, returns CssChain
    • prop(name) returns 1st element property value or undefined for empty collection
    • prop(name, value) sets elements attribute, returns CssChain
    • parent() - set of immediate parents of current collection, duplications removed
    • parent(css) - set of parents of current set which matches the selector, duplications removed
    • on(eventName, cb) - alias to addEventListener
    • remove() - delete all nodes, returns empty CssChain
    • remove(eventName, cb) - alias to removeEventListener

    html elements properties

    When property is assigned to collection, this property would be set for all elements in collection. The property get would return property from 1st element.

        import { CssChain as $ } from '../src/CssChain.js';
        $( 'input' ).value = 'not defined'; // all INPUT elements would have new value set
        v = $( 'input' ).prop( value,'not defined' ); // same as ^^
        let  v = $( 'input' ).value; // variable would receive the 1st INPUT element value
        v = $( 'input' ).prop( value ); // same as ^^


    Array of raw objects

        $([ {a:1},{a:2} ]).a=1;    // all arr elements property `a` set to 1
        v = $([ {a:1},{a:2} ]).a;  // 1st element property `a` is returned, i.e. 1
        $( [ { a:1,f(v){ this.a=v} }, { b:2,f(v){ this.b=v}} ])
            .f(3); // method called on each element, result [{a:3},{b:3}]

    Array of class objects

    Could be initiated in same fashion as raw objects. But for performance better to provide the reference object as a second parameter:

        class A{ f(){} }
        const x = new A(), y = new A();
        $( [x,y], A ).f()


    for development of css-chain or css-chain-test:

    git clone https://github.com/sashafirsov/css-chain.git
    git clone https://github.com/sashafirsov/css-chain-test.git
    cd css-chain
    npm i
    npm link
    cd ../css-chain-test
    npm i
    npm link css-chain


    <script type="module">
        import 'css-chain/css-chain-element.js';

    Samples of use

    PokéAPI Explorer: PokéAPI Explorer

    Testing with Web Test Runner

    To execute a single test run:

    npm run test

    To run the tests in interactive watch mode in browser:

    npm run test:watch

    Tooling configs

    For most of the tools, the configuration is in the package.json to minimize the amount of files in your project.

    If you customize the configuration a lot, you can consider moving them to individual files.




    npm i css-chain-test

    DownloadsWeekly Downloads






    Unpacked Size

    5.05 MB

    Total Files


    Last publish


    • suns