(HTML: data-filter attribute) How to set default attribute section instead of showing all record.on page load
<p>I need that default filter value should be set, instead of showing all elements.</p>

<p>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).</p>

<p>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.</p>

<p><strong>CSS:</strong></p>

<pre><code>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;
}   
</code></pre>

<p><strong>HTML:</strong></p>

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

    &lt;div data-filter="red"/&gt;
    &lt;div data-filter="blue"/&gt;
    &lt;div data-filter="red"/&gt;
    &lt;div data-filter="blue"/&gt;
    &lt;div data-filter="green"/&gt;
    &lt;div data-filter="red"/&gt;
    &lt;div data-filter="red"/&gt;
    &lt;div data-filter="red"/&gt;
    &lt;div data-filter="blue"/&gt;
    &lt;div data-filter="green"/&gt;
    &lt;div data-filter="blue"/&gt;
    &lt;div data-filter="green"/&gt;
    &lt;div data-filter="green"/&gt;
&lt;/section&gt; 
</code></pre>