...">
Clever Geek Handbook

Find div that does not contain a specific property on a specific attribute using CSS selector

I have the following situation:

<div id="foo">
   <div id="1" style="transform:translate3d(5px,5px,5px);"></div>
   <div id="2" style="background-color:black;"></div>
</div>

I want to find a div that has no 'transform' property ie a div with 'id = 2'.

I tried the following, but it only selects a div property that has a transform property, I want the exact opposite.

$('#foo').find('div[style*="transform"]');
+3


source to share


3 answers 


$('#foo').find('div:not([style*="transform"])').css('color','red')
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
   <div id="1" style="transform:translate3d(5px,5px,5px);">1</div>
   <div id="2" style="background-color:black;">2</div>
</div>
Run codeHide result




  • Use :not()

+7


source


it's good to do it



$('#foo div').not('div[style*="transform"]');
+3


source 


console.log($('#foo').find('div:not([style*="transform"])').text());
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="foo">
  <div id="1" style="transform:translate3d(5px,5px,5px);">111</div>
  <div id="2" style="background-color:black;">222</div>
</div>
Run codeHide result


+2


source






More articles:


All Articles