Why does this CSS Code not work?!
By clicking the second checkbox, both its label and the paragraph("p" tag) should be changed into red, but only the color of the label is changed.
I wonder why!!

  

      <!DOCTYPE HTML>
        <meta charset="utf-8"/>
        <title>Testing</title>
        <style>
        
        	input[ type = "checkbox" ]{display:none}
        	input[ type = "checkbox" ]:last-of-type:checked + label{ color:red; }
        	input[ type = "checkbox" ]:last-of-type:checked ~ p{ color:red; }
        
        </style> 
        <form>
                    
        	<input type="checkbox" id="c1" /><label for="c1">Check1</label>
        	<input type="checkbox" id="c2" /><label for="c2">Check2</label>
        	<p>Hello!</p>
                
                
        </form>
Why does this CSS Code not work?!
===

By clicking the second checkbox, both its label and the paragraph("p" tag) should be changed into red, but only the color of the label is changed.
I wonder why!!

  

      <!DOCTYPE HTML>
        <meta charset="utf-8"/>
        <title>Testing</title>
        <style>
        
        	input[ type = "checkbox" ]{display:none}
        	input[ type = "checkbox" ]:last-of-type:checked + label{ color:red; }
        	input[ type = "checkbox" ]:last-of-type:checked ~ p{ color:red; }
        
        </style> 
        <form>
                    
        	<input type="checkbox" id="c1" /><label for="c1">Check1</label>
        	<input type="checkbox" id="c2" /><label for="c2">Check2</label>
        	<p>Hello!</p>
                
                
        </form>