(HTML: data-filter attribute) How to set default attribute section instead of showing all record.on page load

Question

I need that default filter value should be set, instead of showing all elements.

Once Page is loaded, By default all values are getting displayed and on click of anchor specific filter values are getting displayed (like blue color in this example).

For Given Example: After page load, instead of showing all color, Blue color elements needs to be shown. By default all values are getting displayed, but I need a specific color data value.

CSS:

section {
    display: block;
    float: left;
    border: 2px solid green;
    min-height: 300px;
    width: 100%;
    border-radius: 4px;
}
a {
    display: block;
    float: left;
    width: 25%;
    text-decoration: none;
    text-align: center;
    padding: 5px 0;
    color: white;
    background: #1271C7;
}
div {
    display: block;
    float: left;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    margin: 10px;
    -webkit-transition: all .8s linear;
    -moz-transition: all .8s linear;
    -o-transition: all .8s linear;
    -ms-transition: all .8s linear;
    transition: all .8s linear;
    margin-top: 20px;
}
div[data-filter="red"] {
    background: red;
}
div[data-filter="green"] {
    background: green;
}
div[data-filter="blue"] {
    background: blue;
}
a:focus[data-filter] {
    opacity: .8;
    outline: none;
}
a[data-filter="red"]:focus ~ div:not([data-filter="red"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}
a[data-filter="green"]:focus ~ div:not([data-filter="green"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
    height: 0px;
    width: 0px;
    border: none;
    margin: 0;
}   

HTML:

<section>
    <a id="tab2" href="#" data-filter="red" tabindex="-1">RED</a>
    <a id="tab3" href="#" data-filter="green" tabindex="-1">GREEN</a>
    <a id="tab4" href="#" data-filter="blue" tabindex="-1">BLUE</a>

    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="red"/>
    <div data-filter="red"/>
    <div data-filter="red"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="blue"/>
    <div data-filter="green"/>
    <div data-filter="green"/>
</section> 

Answer 1

You can use jQuery to customize your app. Using css alone you can't do this. here is the solution using jquery. $(document).ready(function(){ $('div[data-filter="red"').show(0); // only red column on page load

 $("a").click(function(e){
    e.preventDefault();
    var x=$(this).attr("data-filter");  //returns data-filter value of a tag
     if(x=="all"){
             $('div[data-filter').show(0);   
    }
        else{                
    $("div[ data-filter]").hide(0);
    $('div[data-filter="' + x +'"]').show(0);
        }
})

})