css - Multiple div in class -

so have following html , css.

<div class="parent">   <div class="a"> </div>   <div class="b"> b </div>   <div class="c"> c </div>   <div class="d"> d </div>   <div class="e"> e </div>   <div class="f"> f </div> </div>  <style>    .parent .a{display:none;}    .parent .b{display:none;}    .parent .c{display:none;}    .parent .d{display:none;}    .parent .e{display:none;} </style> 

in case, how can simplify css don't have repeat same code 5 times?

edit: should have been more clear. not of elements hidden. selection of classes hidden in "parent" (class="f" not hidden)

thanks

you have several options.

option 1:

like @akshay commented, can do:

.parent div {     display: none; } 

and every single div inside of display: none;

option 2:

you can do:

.parent >div {    display: none; } 

and target first level divs.

option 3:

also can add specific class hide elements.

for example : hidden

.parent .hidden {    display: none; } 

and html:

<div class="parent">   <div class="a hidden"> </div>   <div class="b hidden"> b </div>   <div class="c hidden"> c </div>   <div class="d hidden"> d </div>   <div class="e hidden"> e </div>   <div class="f"> f </div> </div> 

this way f still show , others hidden.

option 4:

if want content of parent hidden, can give parent display: none.. this:

.parent {    display: none; } 

this way parent , children hidden.

there lot more options .. these examples.