SoFunction
Updated on 2025-02-28

jquery css selector demo code


<script type="text/javascript">
$('#one').css("background","#fff");
$('div').css("background","#fff");
$('body div').css("background","#bbffa");//Change the properties of all divs in the body
$('div > span').css("background","#bbffa").css("color","red").css("font-size","12px");//Change the properties of span elements under all divs
$('#two >.mini').css("background","red");//id is the attribute of all elements in the div of two whose class is mini
$('#two').siblings("div").css("color","green");//Select the div element of the #two peer regardless of the front and rear positions
$('div:first').css("background","red");
$('div:gt(1)').css("background","#fff");//All div elements with index value greater than 1
$('div:lt(1)').css("background","yellow");
$('div:not(.one)').css("color","#cccccc");//Change the div element whose class is not one
$('div:even').css("font-size","15px");//Div with even index number
$('div:odd').css("font-size","12px");//Div with odd index number
$('div:contains(other)').css("font-size","10px");//Set the div element containing the text other
$('div:has(.mini)').css("color","#bbffa");//Set the background color of the <div> element with class as mini element
$('div:parent').css("color","#ffcccc");//Change the properties of the div element containing child elements (including text)
$('div:hidden').show(3000);//Get hidden div
$('div:visible')//Get the visible div
$("div[title=test]").css("background","black");//Set the div with title to test
$("div[.mini][title=test]").css("color","red");//Set class to div with mini title to test
</script>