jQuery Selectors

PHOTO

Mon Dec 18 2023 03:29:44 GMT+0000 (Coordinated Universal Time)

Saved by @Sifat_H #selector #jqueryselector #selectelements

$("*")	                Selects all elements
$(this)	                Selects the current HTML element
$("p.intro")	        Selects all <p> elements with class="intro"
$("p:first")	        Selects the first <p> element	Try it
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	        Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"	Try it
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all <button> elements and <input> elements of type="button"	Try it
$("tr:even")	Selects all even <tr> elements	Try it
$("tr:odd")	Selects all odd <tr> elements

COPY

This helps selecting elements with jquery.

https://www.w3schools.com/jquery/jquery_selectors.asp

Save snippets that work from anywhere online with our extensions

Comments

More like this

#jquery #selector #jqueryselector #documentready function #documentready #document.ready #jqueryonclick

jQuery Selectors for buttons

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#selector #jqueryselector #selectelements

jQuery Selectors

$("*")	                Selects all elements
$(this)	                Selects the current HTML element
$("p.intro")	        Selects all <p> elements with class="intro"
$("p:first")	        Selects the first <p> element	Try it
$("ul li:first")	Selects the first <li> element of the first <ul>
$("ul li:first-child")	Selects the first <li> element of every <ul>
$("[href]")	        Selects all elements with an href attribute
$("a[target='_blank']")	Selects all <a> elements with a target attribute value equal to "_blank"	Try it
$("a[target!='_blank']")	Selects all <a> elements with a target attribute value NOT equal to "_blank"	Try it
$(":button")	Selects all <button> elements and <input> elements of type="button"	Try it
$("tr:even")	Selects all even <tr> elements	Try it
$("tr:odd")	Selects all odd <tr> elements

#css #selector

Class Name Contains ...

div[class*="test"] {
    background: #000;
}

#css #selector #attribute

diverse attribute selectors

/* Select all <a> that are hrefs: */
a[href]{}

/* Select all elements that have a class (useful if JS is adding classes somewhere) */
article[class]{}

/* Select an ID, but with the specificity of a class:  */
section[id="sideBar"]{color: red}

/* Style all links that are fully qualified URLs, knowing that ^ means "starts with": */
a[href^="http"]{}

/* Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means "ends with" */
a[href$=".zip"]:after{content:"(zip)"}

/* Style an image based on one word existing in the alt attribute? Let's use the space substring selector: */
img[alt~="Insurance"]{}

/* Style an image based on the name of the image file itself? Also doable, even if you're image is this-image-shot-april-2-2014.png. The | is a hyphen substring selector: */
img[src|="-april-"]{}

#css #selector

Element not only child

/* Element not only child */

div p:last-child:not(:only-child) { 
	font-weight: bolder; 
}

#css #selector

First or last element

article:first-of-type,
article:last-of-type {
	margin: 10px 0;
}

#css #selector

General Sibling Combinator

/*
General Sibling Combinator
*/

figure ~ p {}

#css #selector

General sibling selector

/* General sibling selector */
h4 ~ p {
    font-weight:bold;
}

#css #selector

Sibling Selector

/* all ULs after p */
p ~ ul {
background-color: #f00;
}

#css #selector #attribute

Check attribute value

div[class*="left"] {
	float: left;
}

#css #selector #empty

hide empty elements

p:empty {
	display:none;
}

#css #selector #list

list with not selector

/* list with not selector */

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

#css #selector #not

Not last child

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

#css #selector #not

not pseudo class

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

#css #selector #not

not-selector

ul li:not(.active) {}

jQuery Selectors

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet