class - What is the best css selector for 'all children'? -

on page - in css have put:

*{pointer-events:none;} .pev{pointer-events:auto} 

this because want strong ui , there draggable things don't want users accidentally selecting things, etc

so taking away clicks,hovers etc , putting them on things need touched

i have element (classed .play) holds youtube player (given it's parent prev class , jquery draggable).

i know proper efficient way bypass .prev , * , add pointer-events auto player , inside via inheritance (i think correct)

which of these better syntax?

.play*{pointer-events:auto;} .play < *{pointer-events:auto;} 

update----------------------------

thanks pinal, have been able stabilize pointer-events (if cursor happens interfere video when dragging pointer events of video stop drag event eg mouse moves faster dragged element stall in dragging happen.. result === ui looks broken).

so here simple fix (thanks again man)...

css:

*{outline:none;pointer-events:none;} .pev{pointer-events:auto!important;} .play > * {pointer-events:auto;} .playdrag > * {pointer-events:none!important;} 

jquery:

$(document.body)     .on('mouseover','.play',function(){         $('.play').draggable({ containment:'#screensize',scroll:false});         })     .on('mousedown','.play',function(){         $(this).addclass('playdrag');         })     .on('mouseup','.play',function(){         $(this).removeclass('playdrag');         }); 

so cool, makes smooooooooth!

you have misprints, forgot spaces , children selector >, not <:

.play * {pointer-events:auto;}//select inside .play > *{pointer-events:auto;}//select children 

so better use .play > * children selection.