JS QuerySelector vs Native GetElementsBy... methods (v2)

Revision 2 of this benchmark created on


Preparation HTML

<div id="signup-modal-container"><aside class="s-modal" role="dialog" aria-hidden="true" aria-labelledby="signup-modal-title" aria-describedby="signup-modal-description"><div class="s-modal--dialog pt32 pr32 pb32" role="document"><h1 id="signup-modal-title" class="s-modal--header"><div slot="header" class="s-modal--header d-flex g4 mt8 ai-center"><img class="h48 w48 native" src="https://cdn.sstatic.net/Sites/stackoverflow/Img/icon-48.png?v=b7e36f88ff92" alt="site logo"> <span class="fs-headline1 mb0 fc-black-700"><strong>Join Stack Overflow</strong></span></div></h1> <div id="signup-modal-description" class="s-modal--body"><div slot="body" class="wmx4 pl8"><p class="fs-caption fc-black-400 ta-left mb24">By clicking “Sign up”, you agree to our <a href="/legal/terms-of-service/public" target="_blank" rel="noopener noreferrer" class="s-link svelte-9quauz">terms of service</a>  and acknowledge you have read our <a href="/legal/privacy-policy" target="_blank" rel="noopener noreferrer" class="s-link svelte-9quauz">privacy policy</a>.</p> <div class="pb32"><form class="flex--item" action="/users/signup?ssrc=undefined&amp;returnurl=https%3A%2F%2Fstackoverflow.com%2Fusers%2Fafter-signup%2Foauth-only" method="POST" target="oauth-frame"><input type="hidden" name="fkey" value="d8669c2b82a8fd4013379493e4103fc6bf2b2018101f6f301103dee9f17d809c"> <input type="hidden" name="legalLinksShown" value="1"> <input type="hidden" name="ssrc" value="undefined">   <input type="hidden" name="oauth_version" value="2.0"> <input type="hidden" name="oauth_server"> <div class="d-flex fd-column gy12"><button class="s-btn w100 s-btn__google" type="submit" data-testid="signup-google" data-provider="Google"><div class="d-flex ai-center jc-center gx8"><svg aria-hidden="true" class="native svg-icon iconGoogle" width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #4ba0f4;"></path><path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #62cf7f;"></path><path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #fbc31e;"></path><path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.8 4.8 0 0 1 4.48-3.3" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #eb5043;"></path></svg> Sign up with Google</div> </button><button class="s-btn w100 s-btn__google" type="submit" data-testid="signup-github" data-provider="GitHub"><div class="d-flex ai-center jc-center gx8"><svg aria-hidden="true" class="native svg-icon iconGitHub" width="18" height="18" viewBox="0 0 18 18"><path fill="#010101" d="M9 1a8 8 0 0 0-2.53 15.59c.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.4 7.4 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48l-.01 2.2c0 .21.15.46.55.38A8.01 8.01 0 0 0 9 1" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #e7e5e2;"></path></svg> Sign up with GitHub</div> </button></div></form></div> <h1 class="svelte-1mm1u63">OR</h1> <form id="signup-modal-signup-form" class="mt32 d-flex fd-column gy16" action="/users/signup?ssrc=undefined&amp;returnurl=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F34100018%2Fselector-for-best-performance-in-jquery" method="POST"><input type="hidden" name="fkey" value="d8669c2b82a8fd4013379493e4103fc6bf2b2018101f6f301103dee9f17d809c"> <input type="hidden" name="legalLinksShown" value="1"> <input type="hidden" name="ssrc" value="undefined"> <div class="flex--item d-flex fd-column gs4 gsy  svelte-1rlgrxv"><label class="flex--item s-label" for="signup-modal-email">Email</label> <div class="d-flex ps-relative"><input class="s-input" id="signup-modal-email" size="30" maxlength="100" name="email" autocomplete="off"></div> </div> <div class="flex--item d-flex fd-column gs4 gsy  svelte-1rlgrxv"><label class="flex--item s-label" for="signup-modal-password">Password</label> <div class="d-flex ps-relative"><input id="signup-modal-password" class="flex--item s-input" type="password" autocomplete="new-password" name="password" placeholder="8+ characters (at least 1 letter &amp; 1 number)"> <button type="button" class="show-hide-password svelte-1rlgrxv"><svg aria-hidden="true" class="svg-icon iconEyeOff" width="18" height="18" viewBox="0 0 18 18"><path d="m5.02 9.44-2.22 2.2C1.63 10.25 1 9 1 9s3-6 8.06-6q1.13.01 2.12.38L9.5 5.03 9 5a4 4 0 0 0-3.98 4.44m2.03 3.05A4 4 0 0 0 13 9q-.01-1.1-.54-2l-1.51 1.54q.05.22.05.46a2 2 0 0 1-2.44 1.95zm7.11-7.22A15 15 0 0 1 17 9s-3 6-7.94 6c-1.31 0-2.48-.4-3.5-1l-1.97 2L2 14.41 14.59 2 16 3.41z"></path></svg></button></div> </div> <div class="flex--item d-flex gs4 gsy fd-column svelte-1rlgrxv"><button class="flex--item s-btn s-btn__filled mt12  svelte-1rlgrxv" id="signup-modal-submit-button" name="submit-button" type="submit">Sign up</button> <p class="flex--item s-input-message d-none svelte-1rlgrxv" aria-hidden="true" aria-live="assertive"></p></div></form></div></div> <div class="d-flex g8 s-modal--footer"><div slot="footer" class="fs-body1 pl8">Already have an account?  <a href="/users/login" class="s-link">Log in</a></div></div> <button class="s-btn s-modal--close s-btn__muted s-btn__icon" aria-label="Close"><svg aria-hidden="true" class="modal-close svg-icon iconClear" width="18" height="18" viewBox="0 0 18 18"><path d="M15 4.41 13.59 3 9 7.59 4.41 3 3 4.41 7.59 9 3 13.59 4.41 15 9 10.41 13.59 15 15 13.59 10.41 9z"></path></svg></button></div></aside></div>    
        <div id="one-tap-container"> <form id="one-tap-form" method="post" action="/users/auth/gcp?ssrc=google-one-tap&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery"><input type="hidden" name="fKey" value="d8669c2b82a8fd4013379493e4103fc6bf2b2018101f6f301103dee9f17d809c"> <input type="hidden" name="googleIdToken" value=""></form></div>
<div id="notify-container"></div>
    <div id="custom-header"></div>
        

<header class="s-topbar ps-fixed t0 l0 js-top-bar">
    <a href="#content" class="s-topbar--skip-link">Skip to main content</a>
	<div class="s-topbar--container">
			<a href="#" class="s-topbar--menu-btn js-left-sidebar-toggle" role="menuitem" aria-haspopup="true" aria-controls="left-sidebar" aria-expanded="false"><span></span></a>
			<div class="topbar-dialog leftnav-dialog js-leftnav-dialog dno">
				<div class="left-sidebar js-unpinned-left-sidebar" data-can-be="left-sidebar" data-is-here-when="sm"></div>
			</div>
				<a href="https://stackoverflow.com" class="s-topbar--logo js-gps-track" data-gps-track="top_nav.click({is_current:false, location:2, destination:8}); homelogo_nav.click({location:2})">
					<span class="-img _glyph">Stack Overflow</span>
				</a>



			<ol class="s-navigation" role="presentation">

					<li class="md:d-none">
						<a href="https://stackoverflow.co/" class="s-navigation--item js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:7})" data-ga="[&quot;top navigation&quot;,&quot;about menu click&quot;,null,null,null]">About</a>
					</li>

				<li>
					<a href="#" class="s-navigation--item js-gps-track js-products-menu" aria-controls="products-popover" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="bottom" data-s-popover-toggle-class="is-selected" data-gps-track="top_nav.products.click({location:2, destination:1})" data-ga="[&quot;top navigation&quot;,&quot;products menu click&quot;,null,null,null]" aria-expanded="false">
						Products
					</a>
				</li>

                    <li class="md:d-none">
                        <a href="https://stackoverflow.co/teams/ai/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav-bar&amp;utm_content=overflowai" class="s-navigation--item js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:10})" data-ga="[&quot;top navigation&quot;,&quot;learn more - overflowai&quot;,null,null,null]">OverflowAI</a>
                    </li>

			</ol>
			<div class="s-popover ws2 mtn2 p0" id="products-popover" role="menu" aria-hidden="true">
				<div class="s-popover--arrow"></div>
				<ol class="list-reset s-anchors s-anchors__inherit">
					<li class="m6">
						<a href="https://stackoverflow.co/teams/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=stack-overflow-for-teams" class="bar-sm p6 d-block h:bg-black-225 js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:3})" data-ga="[&quot;top navigation&quot;,&quot;teams submenu click&quot;,null,null,null]">
							<span class="fs-body1 d-block">Stack Overflow for Teams</span>
							<span class="fs-caption d-block fc-black-400">Where developers &amp; technologists share private knowledge with coworkers</span>
						</a>
					</li>
					<li class="m6">
						<a href="https://stackoverflow.co/advertising/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=stack-overflow-advertising" class="bar-sm p6 d-block h:bg-black-225 js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:6})" data-ga="[&quot;top navigation&quot;,&quot;advertising submenu click&quot;,null,null,null]">
							<span class="fs-body1 d-block">Advertising &amp; Talent</span>
							<span class="fs-caption d-block fc-black-400">Reach devs &amp; technologists worldwide about your product, service or employer brand</span>
						</a>
					</li>
					<li class="bt bc-black-200 pt6 px6 bbr-md">
						<a href="https://stackoverflow.co/teams/ai/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=overflow-ai" class="bar-sm p6 d-block h:bg-black-225 js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:10})" data-ga="[&quot;top navigation&quot;,&quot;overflowai submenu click&quot;,null,null,null]">
						 	<span class="fs-body1 d-block">OverflowAI</span>
							<span class="fs-caption d-block fc-black-400">GenAI features for Teams</span>
						 </a>
					</li>
					<li class="pb6 px6 bbr-md">
						<a href="https://stackoverflow.co/api-solutions/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=overflow-api" class="bar-sm p6 d-block h:bg-black-225 js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:11})" data-ga="[&quot;top navigation&quot;,&quot;overflowapi submenu click&quot;,null,null,null]">
						 	<span class="fs-body1 d-block">OverflowAPI</span>
							<span class="fs-caption d-block fc-black-400">Train &amp; fine-tune LLMs</span>
						 </a>
					</li>
					<li class="bt bc-black-200 py6 px6 bbr-md">
						<a href="https://stackoverflow.co/labs/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=labs" class="bar-sm p6 d-block h:bg-black-225 js-gps-track" data-gps-track="top_nav.products.click({location:2, destination:12})" data-ga="[&quot;top navigation&quot;,&quot;labs submenu click&quot;,null,null,null]">
						 	<span class="fs-body1 d-block">Labs</span>
							<span class="fs-caption d-block fc-black-400">The future of collective knowledge sharing</span>
						 </a>
					</li>
					<li class="bg-black-100 bt bc-black-200 py6 px6 bbr-md">
						<a href="https://stackoverflow.co/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=about-the-company" class="fc-black-400 d-block py6 px6 h:fc-black-600" data-ga="[&quot;top navigation&quot;,&quot;about submenu click&quot;,null,null,null]">About the company</a>

						<a href="https://stackoverflow.blog/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=top-nav&amp;utm_content=blog" class="fc-black-400 d-block py6 px6 h:fc-black-600" data-ga="[&quot;top navigation&quot;,&quot;blog submenu click&quot;,null,null,null]">Visit the blog</a>
					</li>
				</ol>
			</div>


		        <form id="search" role="search" action="/search" class="s-topbar--searchbar js-searchbar " autocomplete="off">
                        <div class="s-topbar--searchbar--input-group">
                            <input name="q" type="text" role="combobox" placeholder="Search…" value="" autocomplete="off" maxlength="240" class="s-input s-input__search js-search-field wmn1 " aria-label="Search" aria-controls="top-search" data-controller="s-popover" data-action="focus->s-popover#show" data-s-popover-placement="bottom-start" aria-expanded="false">
                            <svg aria-hidden="true" class="s-input-icon s-input-icon__search svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18zM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0"></path></svg>
                            <div class="s-popover p0 wmx100 wmn4 sm:wmn-initial js-top-search-popover" id="top-search" role="menu">
    <div class="s-popover--arrow"></div>
    <div class="s-popover--content">
        <div class="js-spinner p24 d-flex ai-center jc-center d-none">
            <div class="s-spinner s-spinner__sm fc-orange-400">
                <div class="v-visible-sr">Loading…</div>
            </div>
        </div>

        <span class="v-visible-sr js-screen-reader-info"></span>
        <div class="js-ac-results overflow-y-auto hmx3 d-none"></div>

        <div class="js-search-hints" aria-describedby="Tips for searching"></div>
    </div>
</div>
                        </div>
                </form>
		

<nav class="h100 ml-auto overflow-x-auto pr12" aria-label="Topbar">
    <ol class="s-topbar--content" role="menubar">
    
    
    
        <li class="js-topbar-dialog-corral" role="presentation">
                

    <div class="topbar-dialog siteSwitcher-dialog dno" role="menu">
        <div class="header fw-wrap">
            <h3 class="flex--item">
                <a href="https://stackoverflow.com">current community</a>
            </h3>
            <div class="flex--item fl1">
                <div class="ai-center d-flex jc-end">
                    <button class="js-close-button s-btn s-btn__muted p0 ml8 d-none sm:d-block" type="button" aria-label="Close">
                        <svg aria-hidden="true" class="svg-icon iconClear" width="18" height="18" viewBox="0 0 18 18"><path d="M15 4.41 13.59 3 9 7.59 4.41 3 3 4.41 7.59 9 3 13.59 4.41 15 9 10.41 13.59 15 15 13.59 10.41 9z"></path></svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="modal-content bg-blue-200 current-site-container">
            <ul class="current-site">
                    <li class="d-flex">
                            <div class="fl1">
                <a href="https://stackoverflow.com" class="current-site-link d-flex gx8 site-link js-gps-track" data-id="1" data-gps-track="site_switcher.click({ item_type:3 })">
        <div class="favicon favicon-stackoverflow site-icon flex--item" title="Stack Overflow"></div>
        <span class="flex--item fl1">
            Stack Overflow
        </span>
    </a>

    </div>
    <div class="related-links">
            <a href="https://stackoverflow.com/help" class="js-gps-track" data-gps-track="site_switcher.click({ item_type:14 })">help</a>
            <a href="https://chat.stackoverflow.com/?tab=site&amp;host=stackoverflow.com" class="js-gps-track" data-gps-track="site_switcher.click({ item_type:6 })">chat</a>
    </div>

                    </li>
                    <li class="related-site d-flex">
                            <div class="L-shaped-icon-container">
        <span class="L-shaped-icon"></span>
    </div>

                            <a href="https://meta.stackoverflow.com" class="s-block-link px16 d-flex gx8 site-link js-gps-track" data-id="552" data-gps-track="site.switch({ target_site:552, item_type:3 }),site_switcher.click({ item_type:4 })">
        <div class="favicon favicon-stackoverflowmeta site-icon flex--item" title="Meta Stack Overflow"></div>
        <span class="flex--item fl1">
            Meta Stack Overflow
        </span>
    </a>

                    </li>
            </ul>
        </div>

        <div class="header" id="your-communities-header">
            <h3>
your communities            </h3>

        </div>
        <div class="modal-content" id="your-communities-section">

                <div class="call-to-login">
<a href="https://stackoverflow.com/users/signup?ssrc=site_switcher&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery" class="login-link js-gps-track" data-gps-track="site_switcher.click({ item_type:10 })">Sign up</a> or <a href="https://stackoverflow.com/users/login?ssrc=site_switcher&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery" class="login-link js-gps-track" data-gps-track="site_switcher.click({ item_type:11 })">log in</a> to customize your list.                </div>
        </div>

        <div class="header">
            <h3><a href="https://stackexchange.com/sites">more stack exchange communities</a>
            </h3>
            <a href="https://stackoverflow.blog" class="float-right">company blog</a>
        </div>
        <div class="modal-content">
                <div class="child-content"></div>
        </div>        
    </div>

        </li>
    
            <li role="none"><button class="s-topbar--item s-btn s-btn__icon s-btn__muted d-none sm:d-inline-flex js-searchbar-trigger" role="menuitem" aria-label="Search" aria-haspopup="true" aria-controls="search" title="Click to show search"><svg aria-hidden="true" class="svg-icon iconSearch" width="18" height="18" viewBox="0 0 18 18"><path d="m18 16.5-5.14-5.18h-.35a7 7 0 1 0-1.19 1.19v.35L16.5 18zM12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0"></path></svg></button></li>
                        <li role="none">
                            <a href="https://stackoverflow.com/users/login?ssrc=head&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery" class="s-topbar--item s-topbar--item__unset s-btn s-btn__outlined ws-nowrap js-gps-track" role="menuitem" rel="nofollow" data-gps-track="login.click" data-ga="[&quot;top navigation&quot;,&quot;login button click&quot;,null,null,null]">Log in</a>
                        </li>
                        <li role="none"><a href="https://stackoverflow.com/users/signup?ssrc=head&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery" class="s-topbar--item s-topbar--item__unset ml4 s-btn s-btn__filled ws-nowrap js-signup-button js-gps-track" role="menuitem" rel="nofollow" data-gps-track="signup.topbar.click" data-ga="[&quot;sign up&quot;,&quot;Sign Up Navigation&quot;,&quot;Header&quot;,null,null]">Sign up</a></li>
    </ol>
</nav>


	</div>
</header>



            <div id="signup-dialog-container"></div>

    <div class="container">
                


<div id="left-sidebar" data-is-here-when="md lg" class="left-sidebar js-pinned-left-sidebar ps-relative">
    <div class="left-sidebar--sticky-container js-sticky-leftnav">
        <nav aria-label="Primary">
            <ol class="nav-links">
                <li>
                    <ol class="nav-links">
                        

<li class="ps-relative" aria-current="false">


    <a href="/" class="s-block-link pl8 js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:8,  has_activity_notification:False});home_nav.click({location:2})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="svg-icon iconHome" width="18" height="18" viewBox="0 0 18 18"><path d="M15 10v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5H0l9-9 9 9zm-8 1v6h4v-6z"></path></svg>                <span class="-link--channel-name pl6">Home</span>

        </div>
    </a>
</li>



                        

<li class="ps-relative  youarehere" aria-current="true">


    <a id="nav-questions" href="/questions" class="s-block-link pl8 js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: true, location:2, destination:1,  has_activity_notification:False})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="svg-icon iconQuestion" width="18" height="18" viewBox="0 0 18 18"><path d="m4 15-3 3V4c0-1.1.9-2 2-2h12c1.09 0 2 .91 2 2v9c0 1.09-.91 2-2 2zm7.75-3.97c.72-.83.98-1.86.98-2.94 0-1.65-.7-3.22-2.3-3.83a4.4 4.4 0 0 0-3.02 0 3.8 3.8 0 0 0-2.32 3.83q0 1.93 1.03 3a3.8 3.8 0 0 0 2.85 1.07q.94 0 1.71-.34.97.66 1.06.7.34.2.7.3l.59-1.13a5 5 0 0 1-1.28-.66m-1.27-.9a5 5 0 0 0-1.5-.8l-.45.9q.5.18.98.5-.3.1-.65.11-.92 0-1.52-.68c-.86-1-.86-3.12 0-4.11.8-.9 2.35-.9 3.15 0 .9 1.01.86 3.03-.01 4.08"></path></svg>                <span class="-link--channel-name pl6">Questions</span>

        </div>
    </a>
</li>






                        

<li class="ps-relative" aria-current="false">


    <a href="/tags" class="s-block-link pl8 js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:2,  has_activity_notification:False})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="svg-icon iconTags" width="18" height="18" viewBox="0 0 18 18"><path d="M9.24 1a3 3 0 0 0-2.12.88l-5.7 5.7a2 2 0 0 0-.38 2.31 3 3 0 0 1 .67-1.01l6-6A3 3 0 0 1 9.83 2H14a3 3 0 0 1 .79.1A2 2 0 0 0 13 1z" opacity=".4"></path><path d="M9.83 3a2 2 0 0 0-1.42.59l-6 6a2 2 0 0 0 0 2.82L6.6 16.6a2 2 0 0 0 2.82 0l6-6A2 2 0 0 0 16 9.17V5a2 2 0 0 0-2-2zM12 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4"></path></svg>                <span class="-link--channel-name pl6">Tags</span>

        </div>
    </a>
</li>


                        
                        <li class="pb24"></li>


                        

<li class="ps-relative" aria-current="false">


    <a id="nav-users" href="/users" class="s-block-link pl8 js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:3,  has_activity_notification:False})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="svg-icon iconPeople" width="18" height="18" viewBox="0 0 18 18"><path d="M17 14c0 .44-.45 1-1 1H9a1 1 0 0 1-1-1H2c-.54 0-1-.56-1-1 0-2.63 3-4 3-4s.23-.4 0-1c-.84-.62-1.06-.59-1-3s1.37-3 2.5-3 2.44.58 2.5 3-.16 2.38-1 3c-.23.59 0 1 0 1s1.55.71 2.42 2.09c.78-.72 1.58-1.1 1.58-1.1s.23-.4 0-1c-.84-.61-1.06-.58-1-3s1.37-3 2.5-3 2.44.59 2.5 3c.05 2.42-.16 2.39-1 3-.23.6 0 1 0 1s3 1.38 3 4"></path></svg>                <span class="-link--channel-name pl6">Users</span>

        </div>
    </a>
</li>


                            

<li class="ps-relative" aria-current="false">


    <a id="nav-companies" href="https://stackoverflow.com/jobs/companies?so_medium=stackoverflow&amp;so_source=SiteNav" class="s-block-link pl8 js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:12,  has_activity_notification:False})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="svg-icon iconIndustry" width="18" height="18" viewBox="0 0 18 18"><path d="M10 16v-4H8v4H2V4c0-1.1.9-2 2-2h6c1.09 0 2 .91 2 2v2h2c1.09 0 2 .91 2 2v8zM4 4v2h2V4zm0 4v2h2V8zm4-4v2h2V4zm0 4v2h2V8zm-4 4v2h2v-2zm8 0v2h2v-2zm0-4v2h2V8z"></path></svg>                <span class="-link--channel-name pl6">Companies</span>

        </div>
    </a>
</li>




        <li class="ml8 mt32 mb8">
            <a href="javascript:void(0)" class="s-link s-link d-flex fl-grow1 fc-black-400 h:fc-black-600 fs-fine" role="button" aria-controls="popover-labs-left-nav" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" data-s-popover-toggle-class="is-selected" aria-expanded="false">
                <div class="flex--item fl-grow1 tt-uppercase fc-black-600 fw-bold">Labs</div>
                <div class="flex--item px12">
                    <svg aria-hidden="true" class="svg-icon iconInfoSm" width="14" height="14" viewBox="0 0 14 14"><path d="M7 1a6 6 0 1 1 0 12A6 6 0 0 1 7 1m1 10V6H6v5zm0-6V3H6v2z"></path></svg>
                </div>
            </a>
        </li>
        

<li class="ps-relative" aria-current="false">


    <a id="nav-labs-jobs" href="/jobs?source=so-left-nav" class="s-block-link pl8 ai-center js-disable-jobs-new-link js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:26,  has_activity_notification:False});jobs.click({destination:JobsFakeDoor, is_registered:False, rep_bucket:new, origin:Stack Overflow})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<div class="d-flex ai-center mln8 mrn6 myn8 bg-purple-400 baw3 bas-solid bc-purple-200 bar-circle fc-white p4"><svg aria-hidden="true" class="fc-white bg-transparent svg-icon iconBriefcase" width="18" height="18" viewBox="0 0 18 18"><path d="M5 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h1zm7 0H6v1h6z"></path></svg></div>                <span class="-link--channel-name pl6">Jobs</span>

        </div>
    </a>
</li>


                

<li class="ps-relative" aria-current="false">


    <a id="nav-labs-discussions" href="/beta/discussions" class="s-block-link pl8 ai-center js-gps-track nav-links--link -link__with-icon" data-gps-track="top_nav.click({is_current: false, location:2, destination:24,  has_activity_notification:False})" aria-controls="" data-controller=" " data-s-popover-placement="right" aria-current="false" data-s-popover-auto-show="true" data-s-popover-hide-on-outside-click="never">
        <div class="d-flex ai-center">
<svg aria-hidden="true" class="w16 svg-icon iconMessage" width="18" height="18" viewBox="0 0 18 18"><path d="M5 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1m1 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2zm-5 9V4c0-1.1.9-2 2-2h12c1.09 0 2 .91 2 2v9c0 1.09-.91 2-2 2H4.5zm2.76-5h11.23v-.01H15V4H3v9.65z"></path></svg>                <span class="-link--channel-name pl6">Discussions</span>

        </div>
    </a>
</li>



                            <li class="ml8 mt32 mb4">
                                <div class="d-flex jc-space-between ai-center">
                                    <a class="s-link d-flex fl-grow1 fc-black-400 h:fc-black-600 fs-fine" href="javascript:void(0)" role="button" aria-controls="popover-discover-collectives" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="top" data-s-popover-toggle-class="is-selected" data-gps-track="top_nav.click({is_current:false, location:2, destination:17})" aria-expanded="false">
                                        <div class="flex--item fl-grow1 tt-uppercase fc-black-600 fw-bold">Collectives</div>
                                        <div class="flex--item px12 js-collectives-navcta-toggle">
                                            <svg aria-hidden="true" class="svg-icon iconPlusSm" width="14" height="14" viewBox="0 0 14 14"><path d="M8 2H6v4H2v2h4v4h2V8h4V6H8z"></path></svg>
                                        </div>
                                    </a>
                                </div>

                            </li>
                                <li class="ps-relative js-collectives-navcta-toggle">
                                    <p class="fs-fine pr8 pl8 pt4 fc-black-400">
                                        Communities for your favorite technologies.  <a href="/collectives-all" class="s-link s-link__grayscale s-link__underlined fw-bold">Explore all Collectives</a>
                                    </p>
                                </li>

                        
                    </ol>
                </li>
                
                

        

<li class="js-overflowai-cta ps-relative mt32 mb8">


    <div class="fs-fine tt-uppercase fc-black-600 fw-bold ml8 mt16 mb8">Teams</div>

    <div class="px12 pt12 pb4 mb12 fc-medium overflow-hidden">
        <div style="width: 131px;">
            <svg aria-hidden="true" class="native w100 mtn16 svg-icon iconMarketingOverflowai" width="345" height="72" viewBox="0 0 345 72"><path fill="currentColor" d="M84.22 32.4c-3.97 0-6.65 1.53-8.32 3.29-2.43 2.5-3.06 5.54-3.06 10.37 0 4.88.63 7.92 3.06 10.43 1.63 1.75 4.35 3.29 8.32 3.29s6.7-1.54 8.38-3.3c2.42-2.5 3.05-5.54 3.05-10.42 0-4.83-.63-7.87-3.05-10.37-1.68-1.76-4.4-3.3-8.38-3.3m3.14 20.17c-.8.79-1.8 1.16-3.14 1.16a4.2 4.2 0 0 1-3.1-1.16c-1.37-1.38-1.54-3.75-1.54-6.55s.17-5.08 1.55-6.46a4 4 0 0 1 3.1-1.17c1.33 0 2.38.42 3.13 1.17 1.39 1.38 1.55 3.71 1.55 6.46 0 2.8-.16 5.17-1.55 6.55m26.12-19.89-5.44 16.55-5.48-16.55h-7.03l9.92 26.8h5.27l9.88-26.8zm18.5-.29c-6.99 0-11.72 4.92-11.72 13.67 0 10.84 6.12 13.72 12.44 13.72 4.85 0 7.49-1.5 10.2-4.21l-4.05-3.96c-1.72 1.7-3.14 2.5-6.11 2.5-3.77 0-5.9-2.5-5.9-5.96h16.82v-3c.05-7.34-4.18-12.76-11.67-12.76m-5.1 11.17c.04-1.16.2-1.91.63-2.87a4.7 4.7 0 0 1 4.48-2.8 4.6 4.6 0 0 1 4.47 2.8c.42.96.59 1.7.63 2.87zm26.75-8.3v-2.58h-6.58v26.8h6.7v-16.1c0-3.38 2.26-4.92 4.35-4.92 1.64 0 2.52.54 3.56 1.58l5.07-5.09c-1.84-1.83-3.73-2.5-6.37-2.5a9 9 0 0 0-6.74 2.84m15.19-5.37v29.56h6.7V38.3h4.98v-5.08h-4.94V30.3c0-1.54.8-2.42 2.38-2.42h2.6v-5.67h-3.8c-5.53 0-7.92 3.88-7.92 7.67m39.3 2.5c-3.97 0-6.65 1.54-8.33 3.3-2.42 2.5-3.05 5.54-3.05 10.37 0 4.88.63 7.92 3.05 10.43 1.64 1.75 4.36 3.29 8.33 3.29 3.98 0 6.7-1.54 8.38-3.3 2.42-2.5 3.05-5.54 3.05-10.42 0-4.83-.63-7.87-3.06-10.37-1.63-1.76-4.39-3.3-8.37-3.3m3.19 20.18c-.8.79-1.8 1.16-3.14 1.16a4.2 4.2 0 0 1-3.1-1.16c-1.38-1.38-1.55-3.75-1.55-6.55s.17-5.08 1.55-6.46c.8-.79 1.76-1.17 3.1-1.17s2.38.42 3.14 1.17c1.38 1.38 1.54 3.71 1.54 6.46 0 2.8-.16 5.17-1.54 6.55m39.97-19.89-4.35 16.55-5.53-16.55h-4.9l-5.48 16.55-4.35-16.55h-7.12l8.25 26.8h5.52l5.61-16.8 5.61 16.8h5.53l8.28-26.8zM190.42 51.4V22.22h-6.7v29.6c0 3.8 2.34 7.67 7.87 7.67h3.8v-5.67h-2.59c-1.71 0-2.38-.84-2.38-2.42" data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;"></path><path fill="#F48024" d="M283.26 12.25a10 10 0 0 0-9.57 7.09l-11.4 37.5a10 10 0 0 0 9.56 12.91h51.3a10 10 0 0 0 9.57-7.09l11.4-37.5a10 10 0 0 0-9.56-12.91zm31.34 41.03V28.72h-4.1v-5.88h15.29v5.88h-4.1v24.56h4.1v5.88H310.5v-5.88zm-30.69-24.51h-2.69v-5.88h12.47l9.5 30.4h3.83v5.87h-13.45v-5.88h2.86l-1.1-4h-11.25l-1.1 4h3.63v5.88h-13.45v-5.88h3.05zm1.8 14.64h8l-4-14.47z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #f58a35;"></path><path fill="#BCBBBB" d="M51.56 46.33v18.95H6.75V46.33H0V72h58.3V46.33z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #bdb8af;"></path><path fill="#F48024" d="M12.92 59.17h32.49v-6.11H12.92zm.65-14.62 31.56 6.6 1.3-6.27-31.56-6.6zm4.16-15.06 29.22 13.58 2.72-5.82-29.22-13.58zm8.11-14.3 24.8 20.57 4.16-4.92-24.87-20.56zM41.82 0l-5.2 3.82 19.22 25.8 5.2-3.82z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #f58a35;"></path></svg>
        </div>
        <p class="fs-fine">
            <span class="fw-bold">Now available on Stack Overflow for Teams! </span>AI features where you work: search, IDE, and chat.
        </p>
        <a href="https://stackoverflow.co/teams/ai/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=side-bar&amp;utm_content=overflowai-learn-more" class="w100 s-btn s-btn__filled s-btn__xs bg-orange-400 h:bg-orange-500 js-gps-track pt8 pr7 pb6 pl7" data-gps-track="teams.create.left-sidenav.click({ Action: 7 })" data-ga="[&quot;teams left navigation - anonymous&quot;,&quot;left nav team overflowai click&quot;,&quot;stackoverflow.co/teams/ai&quot;,null,null]">Learn more</a>
        <a href="https://stackoverflow.co/teams/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=side-bar&amp;utm_content=explore-teams" class="w100 s-btn s-btn__muted s-btn__xs mt1 js-gps-track" data-gps-track="teams.create.left-sidenav.click({ Action: 8 })" data-ga="[&quot;teams left navigation - anonymous&quot;,&quot;left nav team overflowai click&quot;,&quot;stackoverflow.com/teams&quot;,null,null]">Explore Teams</a>
    </div>
</li>


    <li class="d-flex ai-center jc-space-between ml8 mt32 mb8 js-create-team-cta d-none">

        <a href="javascript:void(0)" class="s-link d-flex fl-grow1 fc-black-400 h:fc-black-600 fs-fine js-gps-track" role="button" aria-controls="popover-teams-create-cta" data-controller="s-popover" data-action="s-popover#toggle" data-s-popover-placement="bottom-start" data-s-popover-toggle-class="is-selected" data-gps-track="teams.create.left-sidenav.click({ Action: ShowInfo })" data-ga="[&quot;teams left navigation - anonymous&quot;,&quot;left nav show teams info&quot;,null,null,null]" aria-expanded="false">
            <div class="flex--item fl-grow1 fc-black-600 fw-bold tt-uppercase">Teams</div>
            <div class="flex--item px12">
                <svg aria-hidden="true" class="svg-icon iconPlusSm" width="14" height="14" viewBox="0 0 14 14"><path d="M8 2H6v4H2v2h4v4h2V8h4V6H8z"></path></svg>
            </div>
        </a>
    </li>
    <li class="ps-relative js-create-team-cta d-none">
        <p class="fs-fine pr8 pl8 pb4 fc-black-400">
            Ask questions, find answers and collaborate at work with Stack Overflow for Teams.
            <a href="https://stackoverflow.co/teams/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=side-bar&amp;utm_content=explore-teams-compact" class="s-link s-link__grayscale s-link__underlined fw-bold">Explore Teams</a>
        </p>
    </li> 

            </ol>
        </nav>
    </div>


        <div class="s-popover ws2" id="popover-discover-collectives" role="menu">
            <div class="s-popover--arrow"></div>
            <div>
                <svg aria-hidden="true" class="fc-orange-400 float-right ml24 svg-spot spotCollective" width="48" height="48" viewBox="0 0 48 48"><path d="M25.5 7a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M14 18.25c0-.69.56-1.25 1.25-1.25h22.5c.69 0 1.25.56 1.25 1.25V37.5a1 1 0 0 1-1.6.8l-4.07-3.05a1.3 1.3 0 0 0-.75-.25H15.25c-.69 0-1.25-.56-1.25-1.25zM7 24.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0M25.5 48a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M48 24.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0" opacity=".2"></path><path d="M21 3.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0M24.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M0 23.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0M3.5 22a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M21 44.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0m3.5-1.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m20-23a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7M43 23.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0m-23.23-3.14a1 1 0 0 1-.13 1.4l-2.08 1.74 2.08 1.73a1 1 0 1 1-1.28 1.54l-2.42-2.02a1.63 1.63 0 0 1 0-2.5l2.42-2.02a1 1 0 0 1 1.4.13m7.6 1.41a1 1 0 1 1 1.28-1.54l2.42 2.02c.78.65.78 1.85 0 2.5l-2.42 2.02a1 1 0 1 1-1.28-1.54l2.08-1.73zM24.12 18a1 1 0 0 1 .87 1.12l-1 8a1 1 0 1 1-1.98-.24l1-8a1 1 0 0 1 1.11-.87M12.25 13C11.01 13 10 14 10 15.25v15.5c0 1.24 1 2.25 2.25 2.25h17.33q.09 0 .15.05l4.07 3.05a2 2 0 0 0 3.2-1.6V15.25c0-1.24-1-2.25-2.25-2.25zM12 15.25q.02-.23.25-.25h22.5q.23.02.25.25V34.5l-4.07-3.05q-.6-.45-1.35-.45H12.25a.25.25 0 0 1-.25-.25zm7.24-10.68a1 1 0 1 0-.48-1.94A22 22 0 0 0 2.91 17.7a1 1 0 1 0 1.92.58 20 20 0 0 1 14.4-13.72m11.06-1.65a1 1 0 0 0-.58 1.92c6.45 1.92 11.54 7 13.46 13.46a1 1 0 1 0 1.92-.58 22 22 0 0 0-14.8-14.8M4.57 28.76a1 1 0 0 0-1.94.48 22 22 0 0 0 16.13 16.13 1 1 0 1 0 .48-1.94A20 20 0 0 1 4.57 28.76m40.8.48a1 1 0 1 0-1.94-.48 20 20 0 0 1-13.72 14.41 1 1 0 0 0 .58 1.92 22 22 0 0 0 15.08-15.85"></path></svg>
                <h5 class="pt4 fw-bold">Collectives™ on Stack Overflow</h5>
                <p class="my16 fs-caption fc-black-500">Find centralized, trusted content and collaborate around the technologies you use most.</p>
                <a href="/collectives" class="js-gps-track s-btn s-btn__filled s-btn__xs" data-gps-track="top_nav.click({is_current:false, location:2, destination:18})">
                    Learn more about Collectives
                </a>
            </div>
        </div>

        <div class="s-popover ws2" id="popover-teams-create-cta" role="menu" aria-hidden="true">
            <div class="s-popover--arrow"></div>

            <div class="ps-relative overflow-hidden">
                <p class="mb2"><strong>Teams</strong></p>
                <p class="mb12 fs-caption fc-black-400">Q&amp;A for work</p>
                <p class="mb12 fs-caption fc-black-500">Connect and share knowledge within a single location that is structured and easy to search.</p>
                <a href="https://stackoverflow.co/teams/" class="js-gps-track s-btn s-btn__filled s-btn__xs" data-gps-track="teams.create.left-sidenav.click({ Action: CtaClick })" data-ga="[&quot;teams left navigation - anonymous&quot;,&quot;left nav cta&quot;,&quot;stackoverflow.com/teams&quot;,null,null]">
                    Learn more about Teams
                </a>
            </div>

            <div class="ps-absolute t8 r8">
                <svg aria-hidden="true" class="fc-orange-400 svg-spot spotPeople" width="48" height="48" viewBox="0 0 48 48"><path d="M13.5 28a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9M7 30a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v5h11v-5a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v10a2 2 0 0 1-2 2H33v5a1 1 0 0 1-1 1H20a1 1 0 0 1-1-1v-5H8a1 1 0 0 1-1-1zm25-6.5a4.5 4.5 0 1 0 9 0 4.5 4.5 0 0 0-9 0M24.5 34a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9" opacity=".2"></path><path d="M16.4 26.08A6 6 0 1 0 7.53 26C5.64 26.06 4 27.52 4 29.45V40a1 1 0 0 0 1 1h9a1 1 0 1 0 0-2h-4v-7a1 1 0 1 0-2 0v7H6v-9.55c0-.73.67-1.45 1.64-1.45H16a1 1 0 0 0 .4-1.92M12 18a4 4 0 1 1 0 8 4 4 0 0 1 0-8m16.47 14a6 6 0 1 0-8.94 0A3.6 3.6 0 0 0 16 35.5V46a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V35.5c0-1.94-1.64-3.42-3.53-3.5M20 28a4 4 0 1 1 8 0 4 4 0 0 1-8 0m-.3 6h8.6c1 0 1.7.75 1.7 1.5V45h-2v-7a1 1 0 1 0-2 0v7h-4v-7a1 1 0 1 0-2 0v7h-2v-9.5c0-.75.7-1.5 1.7-1.5M42 22c0 1.54-.58 2.94-1.53 4A3.5 3.5 0 0 1 44 29.45V40a1 1 0 0 1-1 1h-9a1 1 0 1 1 0-2h4v-7a1 1 0 1 1 2 0v7h2v-9.55A1.5 1.5 0 0 0 40.48 28H32a1 1 0 0 1-.4-1.92A6 6 0 1 1 42 22m-2 0a4 4 0 1 0-8 0 4 4 0 0 0 8 0"></path><g opacity=".35"><path d="M17 10a1 1 0 011-1h12a1 1 0 110 2H18a1 1 0 01-1-1m1-5a1 1 0 100 2h12a1 1 0 100-2zM14 1a1 1 0 00-1 1v12a1 1 0 001 1h5.09l4.2 4.2a1 1 0 001.46-.04l3.7-4.16H34a1 1 0 001-1V2a1 1 0 00-1-1zm1 12V3h18v10h-5a1 1 0 00-.75.34l-3.3 3.7-3.74-3.75a1 1 0 00-.71-.29z"></path></g></svg>
            </div>
        </div>

        <div class="s-popover ws2" id="popover-labs-left-nav" role="menu" aria-hidden="true">
            <div class="s-popover--arrow"></div>
            <svg aria-hidden="true" class="fc-black-600 mb8 svg-icon iconLabs" width="141" height="45" viewBox="0 0 141 45"><path fill="var(--black-600)" d="M12.38 0h116.24C135.46 0 141 5.54 141 12.38v20.24c0 6.84-5.54 12.38-12.38 12.38H12.38A12.4 12.4 0 0 1 0 32.62V12.38C0 5.54 5.54 0 12.38 0m38.98 41h76.28a8.4 8.4 0 0 0 8.36-8.38V12.38A8.4 8.4 0 0 0 127.62 4H51.38A8.4 8.4 0 0 0 43 12.38v20.24A8.4 8.4 0 0 0 51.36 41m-22.4-12.94.17-2.38-13.26-2.55-.47 2.97zm.24-3.16 1.1-2.4-12-5.6-1.1 2.4zm1.6-3 1.7-2-10.2-8.5-1.7 2zM25 8.8l7.9 10.6 2.1-1.6-7.9-10.6zM29 32v-3H15v3zm2-6v8H13v-8h-3v11h24V26zm57.13 8a.87.87 0 0 0 .82-1.16l-7.83-21.27a.9.9 0 0 0-.82-.57h-2.6c-.37 0-.7.23-.82.57l-7.83 21.27a.86.86 0 0 0 .82 1.16h3.45c.37 0 .7-.24.82-.59l1.27-3.68h7.18l1.27 3.68c.12.35.45.59.82.59zm-11.16-8.75 2.1-5.93 2.03 5.93zM92 33.13c0 .48.38.87.85.87h8.5c2 0 3.81-.57 5.13-1.75a6.7 6.7 0 0 0 2.06-5.12 6 6 0 0 0-2.33-4.96c1.14-.97 2-2.54 2-4.48 0-2-.68-3.7-1.98-4.9a7.5 7.5 0 0 0-5.2-1.79h-8.18a.86.86 0 0 0-.85.87zm9.05-8.51c.94 0 1.57.28 1.97.67.39.38.63.95.63 1.7q-.02 1.11-.64 1.7c-.4.4-1.03.68-1.96.68H96.9v-4.75zm-.3-9c.89 0 1.53.24 1.93.59.38.33.64.84.64 1.6s-.25 1.27-.64 1.6a3 3 0 0 1-1.92.58h-3.87v-4.36zm10.39 14.16a.86.86 0 0 0-.01 1.2c2.17 2.23 4.64 3.02 7.9 3.02 2.3 0 4.36-.6 5.86-1.81a6.4 6.4 0 0 0 2.41-5.18c0-1.96-.6-3.73-1.97-4.93-1.03-.94-2.28-1.45-4.28-1.76l-2.35-.35a4 4 0 0 1-1.89-.76q-.5-.45-.5-1.3.01-1.09.7-1.7a3.2 3.2 0 0 1 2.23-.72c1.6 0 2.84.35 3.91 1.38.33.32.85.32 1.17 0l2-2a.86.86 0 0 0-.01-1.23c-1.95-1.84-4.08-2.61-6.98-2.61-2.3 0-4.25.67-5.63 1.92a6.7 6.7 0 0 0-2.12 5.07c0 1.88.55 3.45 1.77 4.61a8 8 0 0 0 4.38 1.9l2.43.35c1.16.17 1.47.34 1.8.66l.02.02c.32.28.53.78.53 1.54q-.02 1.13-.78 1.67c-.53.4-1.4.68-2.64.68-1.96 0-3.37-.43-4.68-1.75a.83.83 0 0 0-1.19 0zM66.15 34c.47 0 .85-.38.85-.86v-2.89a.86.86 0 0 0-.85-.86H57V11.9c0-.47-.48-.86-.96-.86h-3.18a.86.86 0 0 0-.85.86v21.24c0 .48.38.87.85.87z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: var(--darkreader-text--black-600, #e8e6e3);"></path></svg>
            <p class="fs-caption">Get early access and see previews of new features.</p>
            <a class="s-btn s-btn__filled s-btn__xs s-btn__icon fs-fine" href="https://stackoverflow.co/labs/"><svg aria-hidden="true" class="svg-icon iconShareSm" width="14" height="14" viewBox="0 0 14 14"><path d="M5 1H3a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V9h-2v2H3V3h2zm2 0h6v6h-2V4.5L6.5 9 5 7.5 9.5 3H7z"></path></svg> Learn more about Labs</a>
        </div>



</div>



        <div id="content" class="snippet-hidden">

            

<div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question">
    <link itemprop="image" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">

    <div class="inner-content clearfix">
        

            <div id="question-header" class="d-flex sm:fd-column">
                        <h1 itemprop="name" class="fs-headline1 ow-break-word mb8 flex--item fl1"><a href="/questions/34100018/selector-for-best-performance-in-jquery" class="question-hyperlink">Selector for best performance in jQuery?</a></h1>

                <div class="ml12 aside-cta flex--item sm:ml0 sm:mb12 sm:order-first d-flex jc-end">

                        <div class="ml12 aside-cta flex--item print:d-none">
                                <a href="/questions/ask" class="ws-nowrap s-btn s-btn__filled">
        Ask Question
    </a>

                        </div>
                </div>
            </div>
            <div class="d-flex fw-wrap pb8 mb16 bb bc-black-200">
                    <div class="flex--item ws-nowrap mr16 mb8" title="2015-12-05 01:02:42Z">
                        <span class="fc-black-400 mr2">Asked</span>
                        <time itemprop="dateCreated" datetime="2015-12-05T01:02:42">8 years, 8 months ago</time>
                    </div>
                    <div class="flex--item ws-nowrap mr16 mb8">
                        <span class="fc-black-400 mr2">Modified</span>
                        <a href="?lastactivity" class="s-link s-link__inherit" title="2024-04-26 15:33:26Z">3 months ago</a>
                    </div>
                    <div class="flex--item ws-nowrap mb8" title="Viewed 6,964 times">
                        <span class="fc-black-400 mr2">Viewed</span>
                        7k times
                    </div>
            </div>

            <div id="mainbar" role="main" aria-label="question and answers">
                
<div class="question js-question" data-questionid="34100018" data-position-on-page="0" data-score="6" id="question">
    <style>
    </style><style class="darkreader darkreader--sync" media="screen"></style>
<div class="js-zone-container zone-container-main">
    <div id="dfp-tlb" class="everyonelovesstackoverflow everyoneloves__top-leaderboard everyoneloves__leaderboard"></div>
		<div class="js-report-ad-button-container " style="width: 728px"></div>
</div>


    <div class="post-layout ">
        <div class="votecell post-layout--left">
            

<div class="js-voting-container d-flex jc-center fd-column ai-center gs4 fc-black-300" data-post-id="34100018" data-referrer="None">
        <button class="js-vote-up-btn flex--item s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" aria-describedby="--stacks-s-tooltip-3vzlbizs">
            <svg aria-hidden="true" class="svg-icon iconArrowUp" width="18" height="18" viewBox="0 0 18 18"><path d="M1 12h16L9 4z"></path></svg>
        </button><div id="--stacks-s-tooltip-3vzlbizs" class="s-popover s-popover__tooltip" role="tooltip">This question shows research effort; it is useful and clear<div class="s-popover--arrow"></div></div>
        <input type="hidden" id="voteUpHash" value="70:3:31e,16:4293fce8c20f8148,10:1724240176,16:cdc6ee99906e1bc6,8:34100018,7a98ba0b6f984aa83a51dcfb8506b962fb35517d134b6f8072d38d9cfe673eb3">
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-theme-body-font fw-bold fs-subheading py4" itemprop="upvoteCount" data-value="6">
            6
        </div>
        <button class="js-vote-down-btn js-vote-down-question flex--item mb8 s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" title="This question does not show any research effort; it is unclear or not useful" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200">
            <svg aria-hidden="true" class="svg-icon iconArrowDown" width="18" height="18" viewBox="0 0 18 18"><path d="M1 6h16l-8 8z"></path></svg>
        </button>
        <input type="hidden" id="voteDownHash" value="70:3:31e,16:c2f2a9c06db05386,10:1724240176,16:9445b0a0b8e9fb0a,8:34100018,46434e4bf175c31e8cb6a609f9c11db158e26d83c78c5390f9efb4733e56a247">


        
<button class="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-34100018" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="34100018" data-post-type-id="1" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-ntk97f01">
    <svg aria-hidden="true" class="fc-theme-primary-400 js-saves-btn-selected d-none svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
    <svg aria-hidden="true" class="js-saves-btn-unselected svg-icon iconBookmarkAlt" width="18" height="18" viewBox="0 0 18 18"><path d="m9 10.6 4 2.66V3H5v10.26zM3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
</button><div id="--stacks-s-tooltip-ntk97f01" class="s-popover s-popover__tooltip" role="tooltip">Save this question.<div class="s-popover--arrow"></div></div>








    
    <a class="js-post-issue flex--item s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/34100018/timeline" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-zcobkaeq"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10z"></path></svg></a><div id="--stacks-s-tooltip-zcobkaeq" class="s-popover s-popover__tooltip" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>

</div>

        </div>

        

<div class="postcell post-layout--right">
    
    <div class="s-prose js-post-body" itemprop="text">
                
<p>I just spent 2 hours reading online guides and blogs about jQuery selectors. Everybody says different things and every last one of them seem to be so sure. I need an expert opinion from Stackoverflow.</p>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$(<span class="hljs-string">' #my-id div.my-class '</span>)

$(<span class="hljs-string">' #my-id .my-class '</span>)

$(<span class="hljs-string">' div.my-class '</span>)

$(<span class="hljs-string">' .my-class '</span>)


&lt;div id=<span class="hljs-string">"my-id"</span>&gt;
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">".."</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">".."</span>&gt;</span> Awesome stuff! <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-class"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> I like carrots! <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
&lt;/div&gt;
</code></pre>

<p>Which is the best selector in your opinion? I also need a short explanation because rewriting thousands of lines of code is at stake. <em>It happens one way or another, I just don't want to do it twice</em>.</p>

<p>Also, if I wanted to get <code>&lt;p&gt;</code>, should I give it a class because jQuery and CSS reads selectors from right to left?</p>

<p>Is there even such thing as too many classes or is it because people are just lazy?</p>

<hr>

<p>If the same rules apply to CSS, just let me know. One word is enough.</p>
    </div>

        <div class="mt24 mb12">
            <div class="post-taglist d-flex gs4 gsy fd-column">
                <div class="d-flex ps-relative fw-wrap">
                    
                    <ul class="ml0 list-ls-none js-post-tag-list-wrapper d-inline"><li class="d-inline mr4 js-post-tag-list-item"><a href="/questions/tagged/jquery" class="s-tag post-tag" title="show questions tagged 'jquery'" aria-label="show questions tagged 'jquery'" rel="tag" aria-labelledby="tag-jquery-tooltip-container" data-tag-menu-origin="Unknown">jquery</a></li><li class="d-inline mr4 js-post-tag-list-item"><a href="/questions/tagged/jquery-selectors" class="s-tag post-tag" title="show questions tagged 'jquery-selectors'" aria-label="show questions tagged 'jquery-selectors'" rel="tag" aria-labelledby="tag-jquery-selectors-tooltip-container" data-tag-menu-origin="Unknown">jquery-selectors</a></li></ul>
                </div>
            </div>
        </div>

    <div class="mb0 ">
        <div class="mt16 d-flex gs8 gsy fw-wrap jc-end ai-start pt4 mb16">
            <div class="flex--item mr16 fl1 w96">
                


<div class="js-post-menu pt2" data-post-id="34100018" data-post-type-id="1">

    <div class="d-flex gs8 s-anchors s-anchors__muted fw-wrap">

        <div class="flex--item">
            <a href="/q/34100018" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="Short permalink to this question" data-gps-track="post.click({ item: 2, priv: 0, post_type: 1 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this question" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="question" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="1" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-0" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow" aria-expanded="false">Share</a><div class="s-popover z-dropdown s-anchors s-anchors__default" style="width: unset; max-width: 28em;" id="se-share-sheet-0"><div class="s-popover--arrow"></div><div><label for="share-sheet-input-se-share-sheet-0"><span class="js-title fw-bold">Share a link to this question</span> <span class="js-subtitle"></span></label></div><div class="my8"><input type="text" id="share-sheet-input-se-share-sheet-0" class="js-input s-input wmn3 sm:wmn-initial bc-black-300 bg-white fc-black-600" readonly=""></div><div class="d-flex jc-space-between ai-center mbn4"><button class="js-copy-link-btn s-btn s-btn__link js-gps-track" data-gps-track="">Copy link</button><a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license" class="js-license s-block-link w-auto" target="_blank" title="The current license for this post: CC BY-SA 3.0">CC BY-SA 3.0</a><div class="js-social-container d-none"></div></div></div>
        </div>


                    <div class="flex--item">
                        <a href="/posts/34100018/edit" class="js-suggest-edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 0, post_type: 1 })" title="">Improve this question</a>
                    </div>

                <div class="flex--item">
                    <button type="button" id="btnFollowPost-34100018" class="s-btn s-btn__link js-follow-post js-follow-question js-gps-track" data-gps-track="post.click({ item: 14, priv: 0, post_type: 1 })" data-controller="s-tooltip " data-s-tooltip-placement="bottom" data-s-popover-placement="bottom" aria-controls="" aria-describedby="--stacks-s-tooltip-jljuakzt">
                        Follow
                        <input type="hidden" id="voteFollowHash" value="70:3:31e,16:ebae52321719240c,10:1724240176,16:3a551198865c6370,8:34100018,8458cebc7ebd066d6cd8055b023bb79f33ed5d725d339d86ed21425916297c6d">
                    </button><div id="--stacks-s-tooltip-jljuakzt" class="s-popover s-popover__tooltip" role="tooltip">Follow this question to receive notifications<div class="s-popover--arrow"></div></div>
                </div>






    </div>
    <div class="js-menu-popup-container"></div>
</div>
            </div>

                <div class="post-signature flex--item">
<div class="user-info ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            <a href="/posts/34100018/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 0, post_type: 1 })">edited <span title="2016-11-23 03:45:14Z" class="relativetime">Nov 23, 2016 at 3:45</span></a>
        </div>
        
    </div>
    <div class="user-gravatar32">
        <a href="/users/1244127/json-c11"><div class="gravatar-wrapper-32"><img src="https://i.sstatic.net/7S9Fd.png?s=64" alt="JSON C11's user avatar" width="32" height="32" class="bar-sm"></div></a>
    </div>
    <div class="user-details">
        <a href="/users/1244127/json-c11">JSON C11</a>
        <div class="-flair">
            <span class="reputation-score" title="reputation score 11,654" dir="ltr">11.7k</span><span title="7 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">7</span></span><span class="v-visible-sr">7 gold badges</span><span title="81 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">81</span></span><span class="v-visible-sr">81 silver badges</span><span title="66 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">66</span></span><span class="v-visible-sr">66 bronze badges</span>
        </div>
    </div>
</div>
                </div>
            <div class="post-signature owner flex--item">
                <div class="user-info ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            asked <span title="2015-12-05 01:02:42Z" class="relativetime">Dec 5, 2015 at 1:02</span>
        </div>
        
    </div>
    <div class="user-gravatar32">
        <a href="/users/5383767/solo"><div class="gravatar-wrapper-32"><img src="https://www.gravatar.com/avatar/360ea9c326c33d3daf919e1af02e230e?s=64&amp;d=identicon&amp;r=PG&amp;f=y&amp;so-version=2" alt="Solo's user avatar" width="32" height="32" class="bar-sm"></div></a>
    </div>
    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="/users/5383767/solo">Solo</a><span class="d-none" itemprop="name">Solo</span>
        <div class="-flair">
            <span class="reputation-score" title="reputation score " dir="ltr">6,897</span><span title="7 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">7</span></span><span class="v-visible-sr">7 gold badges</span><span title="36 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">36</span></span><span class="v-visible-sr">36 silver badges</span><span title="70 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">70</span></span><span class="v-visible-sr">70 bronze badges</span>
        </div>
    </div>
</div>


            </div>
        </div>
    </div>
    
</div>




            <span class="d-none" itemprop="commentCount">2</span> 
    <div class="post-layout--right js-post-comments-component">
        <div id="comments-34100018" class="comments js-comments-container bt bc-black-200 mt12 " data-post-id="34100018" data-min-length="15">
            <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">

                        <li id="comment-55952095" class="comment js-comment " data-comment-id="55952095" data-comment-owner-id="3385827" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy"><a href="http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048" rel="nofollow noreferrer">code.tutsplus.com/tutorials/…</a>  will help you to know about selectors .. If you need more information after you read this just let me know</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/3385827/mohamed-yousef" title="23,971 reputation" class="comment-user">Mohamed-Yousef</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952095_34100018">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:10:28Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:10</span>
                </a></span>
                        <span title="this comment was edited 1 time">
                            <svg aria-hidden="true" class="va-text-bottom o50 svg-icon iconPencilSm" width="14" height="14" viewBox="0 0 14 14"><path fill="#F1B600" d="m2 10.12 6.37-6.43 1.88 1.88L3.88 12H2z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ffc923;"></path><path fill="#E87C87" d="m11.1 1.71 1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #e77883;"></path></svg>
                        </span>
            </div>
        </div>
    </li>
    <li id="comment-55952175" class="comment js-comment " data-comment-id="55952175" data-comment-owner-id="5383767" data-comment-score="2">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
                    <span title="number of 'useful comment' votes received" class="cool">2</span>
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">I know the selectors, symbols and everything that comes with that. I just need to know what is most efficient way to select? I learned that some cases takes x TIMES more time than others depending what selectors you use. There is information about which is what but the problem is that these "opinions" are very different. I need a last advice from Stackoverflow community before I start rewriting huge amount of code.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/5383767/solo" title="6,897 reputation" class="comment-user owner">Solo</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952175_34100018">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:15:15Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:15</span>
                </a></span>
                        <span title="this comment was edited 4 times">
                            <svg aria-hidden="true" class="va-text-bottom o50 svg-icon iconPencilSm" width="14" height="14" viewBox="0 0 14 14"><path fill="#F1B600" d="m2 10.12 6.37-6.43 1.88 1.88L3.88 12H2z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ffc923;"></path><path fill="#E87C87" d="m11.1 1.71 1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #e77883;"></path></svg>
                        </span>
            </div>
        </div>
    </li>

            </ul>
	    </div>

        <div id="comments-link-34100018" data-rep="50" data-anon="true">
                    <a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments." href="#" role="button">Add a comment</a>
                <span class="js-link-separator dno">&nbsp;|&nbsp;</span>
            <a class="js-show-link comments-link dno" title="Expand to show all comments on this post" href="#" onclick="" role="button"></a>
        </div>         
    </div>
    </div>

</div>


<div class="js-zone-container zone-container-responsive">
    <div id="dfp-isb" class="everyonelovesstackoverflow everyoneloves__inline-sidebar mx-auto"></div>
		<div class="js-report-ad-button-container mx-auto" style="width: 300px"></div>
</div>

                
                
                <div id="answers">
                    <a name="tab-top"></a>
                    <div id="answers-header">
                        <div class="answers-subheader d-flex ai-center mb8">
                            <div class="flex--item fl1">
                                <h2 class="mb0" data-answercount="3">
                                        3 Answers
                                    <span style="display:none;" itemprop="answerCount">3</span>
                                </h2>
                            </div>
                            <div class="flex--item">
                                

<div class="d-flex g4 gsx ai-center sm:fd-column sm:ai-start">
    <div class="d-flex fd-column ai-end sm:ai-start">
        <label class="flex--item fs-caption" for="answer-sort-dropdown-select-menu">
            Sorted by:
        </label>
        <a class="js-sort-preference-change s-link flex--item fs-fine d-none" data-value="ScoreDesc" href="/questions/34100018/selector-for-best-performance-in-jquery?answertab=scoredesc#tab-top">
            Reset to default
        </a>
    </div>
    <div class="flex--item s-select">
        <select id="answer-sort-dropdown-select-menu">
                    <option value="scoredesc" selected="selected">
                        Highest score (default)
                    </option>
                    <option value="trending">
                        Trending (recent votes count more)
                    </option>
                    <option value="modifieddesc">
                        Date modified (newest first)
                    </option>
                    <option value="createdasc">
                        Date created (oldest first)
                    </option>
        </select>
    </div>
</div>


                            </div>
                        </div>
                            
                    </div>


                                    
<a name="34100117"></a>
<div id="answer-34100117" class="answer js-answer accepted-answer js-accepted-answer" data-answerid="34100117" data-parentid="34100018" data-score="18" data-position-on-page="1" data-highest-scored="1" data-question-has-accepted-highest-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer">
    <div class="post-layout">
        <div class="votecell post-layout--left">
            

<div class="js-voting-container d-flex jc-center fd-column ai-center gs4 fc-black-300" data-post-id="34100117" data-referrer="None">
        <button class="js-vote-up-btn flex--item s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" aria-describedby="--stacks-s-tooltip-g5ojnvdg">
            <svg aria-hidden="true" class="svg-icon iconArrowUp" width="18" height="18" viewBox="0 0 18 18"><path d="M1 12h16L9 4z"></path></svg>
        </button><div id="--stacks-s-tooltip-g5ojnvdg" class="s-popover s-popover__tooltip" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div>
        <input type="hidden" id="voteUpHash" value="70:3:31e,16:5a6696cbef4f4435,10:1724240176,16:4ed6503701e6a5dc,8:34100117,93db437384f9f161749bb9c025a133ef7d0396e2b77df021ab24bb614f11116f">
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-theme-body-font fw-bold fs-subheading py4" itemprop="upvoteCount" data-value="18">
            18
        </div>
        <button class="js-vote-down-btn flex--item mb8 s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" title="This answer is not useful" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200">
            <svg aria-hidden="true" class="svg-icon iconArrowDown" width="18" height="18" viewBox="0 0 18 18"><path d="M1 6h16l-8 8z"></path></svg>
        </button>
        <input type="hidden" id="voteDownHash" value="70:3:31e,16:2dbe669a142b990f,10:1724240176,16:e3d575565198e15d,8:34100117,1825f01e1a09d3274c8bcfc99d5968673621b4938fc88b7542a5a3471b31eab7">


        
<button class="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-34100117" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="34100117" data-post-type-id="2" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-qhlhjyan">
    <svg aria-hidden="true" class="fc-theme-primary-400 js-saves-btn-selected d-none svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
    <svg aria-hidden="true" class="js-saves-btn-unselected svg-icon iconBookmarkAlt" width="18" height="18" viewBox="0 0 18 18"><path d="m9 10.6 4 2.66V3H5v10.26zM3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
</button><div id="--stacks-s-tooltip-qhlhjyan" class="s-popover s-popover__tooltip" role="tooltip">Save this answer.<div class="s-popover--arrow"></div></div>







            <div class="js-accepted-answer-indicator flex--item fc-green-400 py6 mtn8" data-s-tooltip-placement="right" title="Loading when this answer was accepted…" tabindex="0" role="note" aria-label="Accepted">
                <div class="ta-center">
                    <svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8z"></path></svg>
                </div>
            </div>

    
    <a class="js-post-issue flex--item s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/34100117/timeline" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-kire54ej"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10z"></path></svg></a><div id="--stacks-s-tooltip-kire54ej" class="s-popover s-popover__tooltip" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>

</div>

        </div>

        

<div class="answercell post-layout--right">
    
    <div class="s-prose js-post-body" itemprop="text">
<p>If all you want is all instances of DOM elements that match <code>.my-class</code>, then I see no reason why you should use anything other than:</p>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$(<span class="hljs-string">'.my-class'</span>)
</code></pre>

<p>The others are all more specific selectors and can be used if you want to narrow the selector to more than just <code>$('.my-class')</code>.</p>

<p>If you're really trying to fully optimize performance, than using jQuery in the first place is likely not the desired choice as the overhead of jQuery initialization and jQuery objects tends to slow things down.  You use jQuery because it's quick to code and offers great cross-browser support and a bunch of useful methods.  You don't use jQuery to optimize performance.</p>

<p>If you really want to compare the performance of your four jQuery options, then you will have to design up a representative set of HTML (which has to include lots of other things to be truly representative of a real world situation) and then test each of your selectors in some benchmarking tool like jsperf and run that test in all browsers that you care about and with the versions of jQuery that you will be using and then see if you can come to some particular conclusion.  </p>

<p>This smells like an attempt at premature optimization.  Write your code first as simply as possible and only spend time optimizing performance when you've actually measured that you have a performance issue and that this is the place in your code where the performance bottleneck is.  99.99% of the time, the performance of a particular selector is not going to make one iota of difference in your code.  Code simply and without complication first.  In the 0.01% of the time that you actually want to optimize your code, you will probably care so much about performance that you will either pre-cache the list of elements or you will not code it in jQuery in order to avoid the jQuery object setup and overhead.</p>

<p>Here's a jsPerf: <a href="http://jsperf.com/jquery-selector-comparison-specificity/4" rel="noreferrer">http://jsperf.com/jquery-selector-comparison-specificity/4</a>.  This shows relatively little difference between the options when tested in the latest versions of Chrome, Firefox and IE.  There is a slight bias in favor of the <code>$('.my-class')</code> option.</p>

<p>And for reference, you will find that:</p>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByClassName</span>(<span class="hljs-string">"my-class"</span>)
</code></pre>

<p><strong>is as much as 50x faster than any of the jQuery options.</strong></p>

<p>Here's a screenshot of the jsperf results in Chrome:</p>

<p><a href="https://i.sstatic.net/kYeum.png" rel="noreferrer"><img src="https://i.sstatic.net/kYeum.png" alt="enter image description here"></a></p>

<h2>Conclusions</h2>

<ol>
<li><p>For normal coding where you haven't proven you actually have a performance issue that you need to spend time optimizing, use the simplest selector that meets your selection objective.</p></li>
<li><p>If it's really performance critical, use plain Javascript, not jQuery.</p></li>
</ol>
    </div>
    <div class="mt24">
        <div class="d-flex fw-wrap ai-start jc-end gs8 gsy">
            <time itemprop="dateCreated" datetime="2015-12-05T01:15:01"></time>
            <div class="flex--item mr16" style="flex: 1 1 100px;">
                


<div class="js-post-menu pt2" data-post-id="34100117" data-post-type-id="2">

    <div class="d-flex gs8 s-anchors s-anchors__muted fw-wrap">

        <div class="flex--item">
            <a href="/a/34100117" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="Short permalink to this answer" data-gps-track="post.click({ item: 2, priv: 0, post_type: 2 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-1" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow" aria-expanded="false">Share</a><div class="s-popover z-dropdown s-anchors s-anchors__default" style="width: unset; max-width: 28em;" id="se-share-sheet-1"><div class="s-popover--arrow"></div><div><label for="share-sheet-input-se-share-sheet-1"><span class="js-title fw-bold">Share a link to this answer</span> <span class="js-subtitle"></span></label></div><div class="my8"><input type="text" id="share-sheet-input-se-share-sheet-1" class="js-input s-input wmn3 sm:wmn-initial bc-black-300 bg-white fc-black-600" readonly=""></div><div class="d-flex jc-space-between ai-center mbn4"><button class="js-copy-link-btn s-btn s-btn__link js-gps-track" data-gps-track="">Copy link</button><a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license" class="js-license s-block-link w-auto" target="_blank" title="The current license for this post: CC BY-SA 3.0">CC BY-SA 3.0</a><div class="js-social-container d-none"></div></div></div>
        </div>


                    <div class="flex--item">
                        <a href="/posts/34100117/edit" class="js-suggest-edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 0, post_type: 2 })" title="">Improve this answer</a>
                    </div>

                <div class="flex--item">
                    <button type="button" id="btnFollowPost-34100117" class="s-btn s-btn__link js-follow-post js-follow-answer js-gps-track" data-gps-track="post.click({ item: 14, priv: 0, post_type: 2 })" data-controller="s-tooltip " data-s-tooltip-placement="bottom" data-s-popover-placement="bottom" aria-controls="" aria-describedby="--stacks-s-tooltip-b9xvh1qc">
                        Follow
                        <input type="hidden" id="voteFollowHash" value="70:3:31e,16:6a79fad5113b40e5,10:1724240176,16:83325e52619eafa0,8:34100117,63cf0e940e3c287ee612ae5e7cf634c4e1c6daacd48cbb546e2ccadeacf6e3b7">
                    </button><div id="--stacks-s-tooltip-b9xvh1qc" class="s-popover s-popover__tooltip" role="tooltip">Follow this answer to receive notifications<div class="s-popover--arrow"></div></div>
                </div>






    </div>
    <div class="js-menu-popup-container"></div>
</div>
            </div>
            <div class="post-signature flex--item fl0">
<div class="user-info ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            <a href="/posts/34100117/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 0, post_type: 2 })">edited <span title="2018-01-12 16:28:50Z" class="relativetime">Jan 12, 2018 at 16:28</span></a>
        </div>
        
    </div>
    <div class="user-gravatar32">
        
    </div>
    <div class="user-details">
        
        <div class="-flair">
            
        </div>
    </div>
</div>
            </div>


            <div class="post-signature flex--item fl0">
                <div class="user-info user-hover ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            answered <span title="2015-12-05 01:15:01Z" class="relativetime">Dec 5, 2015 at 1:15</span>
        </div>
        
    </div>
    <div class="user-gravatar32">
        <a href="/users/816620/jfriend00"><div class="gravatar-wrapper-32"><img src="https://i.sstatic.net/Xu7hp.jpg?s=64" alt="jfriend00's user avatar" width="32" height="32" class="bar-sm"></div></a>
    </div>
    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="/users/816620/jfriend00">jfriend00</a><span class="d-none" itemprop="name">jfriend00</span>
        <div class="-flair">
            <span class="reputation-score" title="reputation score 701,966" dir="ltr">702k</span><span title="101 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">101</span></span><span class="v-visible-sr">101 gold badges</span><span title="1k silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">1k</span></span><span class="v-visible-sr">1k silver badges</span><span title="1k bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">1k</span></span><span class="v-visible-sr">1k bronze badges</span>
        </div>
    </div>
</div>


            </div>
        </div>
        
    
    </div>
    
</div>




            <span class="d-none" itemprop="commentCount">2</span> 
    <div class="post-layout--right js-post-comments-component">
        <div id="comments-34100117" class="comments js-comments-container bt bc-black-200 mt12 " data-post-id="34100117" data-min-length="15">
            <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">

                        <li id="comment-55952420" class="comment js-comment " data-comment-id="55952420" data-comment-owner-id="816620" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">I added a comparison to <code>document.getElementsByClassName("my-class")</code>.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/816620/jfriend00" title="701,966 reputation" class="comment-user">jfriend00</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952420_34100117">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:35:26Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:35</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-83440093" class="comment js-comment " data-comment-id="83440093" data-comment-owner-id="489000" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">anything will be less performant that plainjs, if you need the maximum performance, go that way. Of course, you will have to deal with browser-compatibility functions, that's why this is something you should do only after you have proven with tests that you need extra performance</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/489000/gabriel-espinoza" title="403 reputation" class="comment-user">Gabriel Espinoza</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment83440093_34100117">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2018-01-12 15:17:03Z, License: CC BY-SA 3.0" class="relativetime-clean">Jan 12, 2018 at 15:17</span>
                </a></span>
            </div>
        </div>
    </li>

            </ul>
	    </div>

        <div id="comments-link-34100117" data-rep="50" data-anon="true">
                    <a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." href="#" role="button">Add a comment</a>
                <span class="js-link-separator dno">&nbsp;|&nbsp;</span>
            <a class="js-show-link comments-link dno" title="Expand to show all comments on this post" href="#" onclick="" role="button"></a>
        </div>         
    </div>
    </div>
</div>

<div class="js-zone-container zone-container-main">
    <div id="dfp-mlb" class="everyonelovesstackoverflow everyoneloves__mid-leaderboard everyoneloves__leaderboard"></div>
		<div class="js-report-ad-button-container " style="width: 728px"></div>
</div>
                                    
<a name="34100198"></a>
<div id="answer-34100198" class="answer js-answer" data-answerid="34100198" data-parentid="34100018" data-score="8" data-position-on-page="2" data-highest-scored="0" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer">
    <div class="post-layout">
        <div class="votecell post-layout--left">
            

<div class="js-voting-container d-flex jc-center fd-column ai-center gs4 fc-black-300" data-post-id="34100198" data-referrer="None">
        <button class="js-vote-up-btn flex--item s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" aria-describedby="--stacks-s-tooltip-hauf6ccu">
            <svg aria-hidden="true" class="svg-icon iconArrowUp" width="18" height="18" viewBox="0 0 18 18"><path d="M1 12h16L9 4z"></path></svg>
        </button><div id="--stacks-s-tooltip-hauf6ccu" class="s-popover s-popover__tooltip" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div>
        <input type="hidden" id="voteUpHash" value="70:3:31e,16:a35b465ef4caedbc,10:1724240176,16:060286354548d35a,8:34100198,9b90a0dae7020e690161900616b2c601e4a1d7a486f79a254a4930a73cb03231">
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-theme-body-font fw-bold fs-subheading py4" itemprop="upvoteCount" data-value="8">
            8
        </div>
        <button class="js-vote-down-btn flex--item mb8 s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" title="This answer is not useful" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200">
            <svg aria-hidden="true" class="svg-icon iconArrowDown" width="18" height="18" viewBox="0 0 18 18"><path d="M1 6h16l-8 8z"></path></svg>
        </button>
        <input type="hidden" id="voteDownHash" value="70:3:31e,16:40be7f19f617bf37,10:1724240176,16:2bf8da1934a79a53,8:34100198,ec31808d71b89930d0d403a733c196fa1fb0348fb7221c34eb0fa6a23fb81bdf">


        
<button class="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-34100198" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="34100198" data-post-type-id="2" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-66xcnvuy">
    <svg aria-hidden="true" class="fc-theme-primary-400 js-saves-btn-selected d-none svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
    <svg aria-hidden="true" class="js-saves-btn-unselected svg-icon iconBookmarkAlt" width="18" height="18" viewBox="0 0 18 18"><path d="m9 10.6 4 2.66V3H5v10.26zM3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
</button><div id="--stacks-s-tooltip-66xcnvuy" class="s-popover s-popover__tooltip" role="tooltip">Save this answer.<div class="s-popover--arrow"></div></div>







            <div class="js-accepted-answer-indicator flex--item fc-green-400 py6 mtn8 d-none" data-s-tooltip-placement="right" title="Loading when this answer was accepted…" tabindex="0" role="note" aria-label="Accepted">
                <div class="ta-center">
                    <svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8z"></path></svg>
                </div>
            </div>

    
    <a class="js-post-issue flex--item s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/34100198/timeline" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-vrgqkt3y"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10z"></path></svg></a><div id="--stacks-s-tooltip-vrgqkt3y" class="s-popover s-popover__tooltip" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>

</div>

        </div>

        

<div class="answercell post-layout--right">
    
    <div class="s-prose js-post-body" itemprop="text">
<p>According to <a href="https://learn.jquery.com/performance/optimize-selectors/" rel="noreferrer">jQuery's Docs:</a></p>

<blockquote>
  <p>Beginning your selector with an ID is always best.</p>
</blockquote>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript"><span class="hljs-comment">// Fast:</span>
$( <span class="hljs-string">"#container div.robotarm"</span> );

<span class="hljs-comment">// Super-fast:</span>
$( <span class="hljs-string">"#container"</span> ).<span class="hljs-title function_">find</span>( <span class="hljs-string">"div.robotarm"</span> );
</code></pre>

<blockquote>
  <p>Be specific on the right-hand side of your selector, and less specific
  on the left.</p>
</blockquote>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript"><span class="hljs-comment">// Unoptimized:</span>
$( <span class="hljs-string">"div.data .gonzalez"</span> );

<span class="hljs-comment">// Optimized:</span>
$( <span class="hljs-string">".data td.gonzalez"</span> );
</code></pre>

<blockquote>
  <p>Avoid Excessive Specificity</p>
</blockquote>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$( <span class="hljs-string">".data table.attendees td.gonzalez"</span> );

<span class="hljs-comment">// Better: Drop the middle if possible.</span>
$( <span class="hljs-string">".data td.gonzalez"</span> );
</code></pre>

<blockquote>
  <p>Avoid the Universal Selector.  Selections that specify or imply that a
  match could be found anywhere can be very slow.</p>
</blockquote>

<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$( <span class="hljs-string">".buttons &gt; *"</span> ); <span class="hljs-comment">// Extremely expensive.</span>
$( <span class="hljs-string">".buttons"</span> ).<span class="hljs-title function_">children</span>(); <span class="hljs-comment">// Much better.</span>

$( <span class="hljs-string">".category :radio"</span> ); <span class="hljs-comment">// Implied universal selection.</span>
$( <span class="hljs-string">".category *:radio"</span> ); <span class="hljs-comment">// Same thing, explicit now.</span>
$( <span class="hljs-string">".category input:radio"</span> ); <span class="hljs-comment">// Much better.</span>
</code></pre>

<hr>

<p><strong>Now, with all that said...</strong> </p>

<p>It's good to be mindful of this stuff and to optimize where possible, but realistically many of these will, more or less, end up being micro optimizations. If you're looking to trim fat for a performance boost there are probably better places to look. </p>

<p><sub><sub>Go ahead... Burn me as a heretic... I'm not scared...</sub></sub></p>
    </div>
    <div class="mt24">
        <div class="d-flex fw-wrap ai-start jc-end gs8 gsy">
            <time itemprop="dateCreated" datetime="2015-12-05T01:25:59"></time>
            <div class="flex--item mr16" style="flex: 1 1 100px;">
                


<div class="js-post-menu pt2" data-post-id="34100198" data-post-type-id="2">

    <div class="d-flex gs8 s-anchors s-anchors__muted fw-wrap">

        <div class="flex--item">
            <a href="/a/34100198" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="Short permalink to this answer" data-gps-track="post.click({ item: 2, priv: 0, post_type: 2 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f3.0%2f" data-se-share-sheet-license-name="CC BY-SA 3.0" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-2" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow" aria-expanded="false">Share</a><div class="s-popover z-dropdown s-anchors s-anchors__default" style="width: unset; max-width: 28em;" id="se-share-sheet-2"><div class="s-popover--arrow"></div><div><label for="share-sheet-input-se-share-sheet-2"><span class="js-title fw-bold">Share a link to this answer</span> <span class="js-subtitle"></span></label></div><div class="my8"><input type="text" id="share-sheet-input-se-share-sheet-2" class="js-input s-input wmn3 sm:wmn-initial bc-black-300 bg-white fc-black-600" readonly=""></div><div class="d-flex jc-space-between ai-center mbn4"><button class="js-copy-link-btn s-btn s-btn__link js-gps-track" data-gps-track="">Copy link</button><a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license" class="js-license s-block-link w-auto" target="_blank" title="The current license for this post: CC BY-SA 3.0">CC BY-SA 3.0</a><div class="js-social-container d-none"></div></div></div>
        </div>


                    <div class="flex--item">
                        <a href="/posts/34100198/edit" class="js-suggest-edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 0, post_type: 2 })" title="">Improve this answer</a>
                    </div>

                <div class="flex--item">
                    <button type="button" id="btnFollowPost-34100198" class="s-btn s-btn__link js-follow-post js-follow-answer js-gps-track" data-gps-track="post.click({ item: 14, priv: 0, post_type: 2 })" data-controller="s-tooltip " data-s-tooltip-placement="bottom" data-s-popover-placement="bottom" aria-controls="" aria-describedby="--stacks-s-tooltip-7zx7978m">
                        Follow
                        <input type="hidden" id="voteFollowHash" value="70:3:31e,16:64e62d2b82aeb89f,10:1724240176,16:c3ee4cd96af6200d,8:34100198,49559edd4dbdd1c4675942d27ba2743af55961420854c33d952b2feed4d44424">
                    </button><div id="--stacks-s-tooltip-7zx7978m" class="s-popover s-popover__tooltip" role="tooltip">Follow this answer to receive notifications<div class="s-popover--arrow"></div></div>
                </div>






    </div>
    <div class="js-menu-popup-container"></div>
</div>
            </div>


            <div class="post-signature flex--item fl0">
                <div class="user-info user-hover ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            answered <span title="2015-12-05 01:25:59Z" class="relativetime">Dec 5, 2015 at 1:25</span>
        </div>
        
    </div>
    <div class="user-gravatar32">
        <a href="/users/1947286/apaul"><div class="gravatar-wrapper-32"><img src="https://i.sstatic.net/vNQ2g.png?s=64" alt="apaul's user avatar" width="32" height="32" class="bar-sm"></div></a>
    </div>
    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="/users/1947286/apaul">apaul</a><span class="d-none" itemprop="name">apaul</span>
        <div class="-flair">
            <span class="reputation-score" title="reputation score 16,150" dir="ltr">16.2k</span><span title="8 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">8</span></span><span class="v-visible-sr">8 gold badges</span><span title="48 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">48</span></span><span class="v-visible-sr">48 silver badges</span><span title="82 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">82</span></span><span class="v-visible-sr">82 bronze badges</span>
        </div>
    </div>
</div>


            </div>
        </div>
        
    
    </div>
    
</div>




            <span class="d-none" itemprop="commentCount">4</span> 
    <div class="post-layout--right js-post-comments-component">
        <div id="comments-34100198" class="comments js-comments-container bt bc-black-200 mt12 " data-post-id="34100198" data-min-length="15">
            <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">

                        <li id="comment-55952443" class="comment js-comment " data-comment-id="55952443" data-comment-owner-id="816620" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">Don't go only by what you read.  If performance is important to you, then you have to measure your specific situation to decide what is best.  My tests don't show that beginning with an id actually improves things in any meaningful way.  So, why complicate your selector with no meaningful benefit.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/816620/jfriend00" title="701,966 reputation" class="comment-user">jfriend00</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952443_34100198">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:37:04Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:37</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-55952656" class="comment js-comment " data-comment-id="55952656" data-comment-owner-id="1947286" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">@jfriend00 jsPerf crashed when I tried to check your result, did you notice any significant difference between the various jQuery selectors?</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/1947286/apaul" title="16,150 reputation" class="comment-user">apaul</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952656_34100198">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:54:04Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:54</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-55952676" class="comment js-comment " data-comment-id="55952676" data-comment-owner-id="1947286" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">@jfriend00  I understand what you're saying though it is generally better to benchmark your own specific use case, but I figured the general guidance with a "don't waste your time" side note was worthwhile...</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/1947286/apaul" title="16,150 reputation" class="comment-user">apaul</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952676_34100198">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 01:55:57Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 1:55</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-55952779" class="comment js-comment " data-comment-id="55952779" data-comment-owner-id="816620" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">I added a screen shot to my answer of the results in Chrome.  As I said in the text of my answer, not much of a difference between the four methods the OP proposed.  But, <code>document.getElementsByClassName()</code> is way, way faster.  So if you want speed, get rid of jQuery.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/816620/jfriend00" title="701,966 reputation" class="comment-user">jfriend00</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment55952779_34100198">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2015-12-05 02:04:56Z, License: CC BY-SA 3.0" class="relativetime-clean">Dec 5, 2015 at 2:04</span>
                </a></span>
            </div>
        </div>
    </li>

            </ul>
	    </div>

        <div id="comments-link-34100198" data-rep="50" data-anon="true">
                    <a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." href="#" role="button">Add a comment</a>
                <span class="js-link-separator dno">&nbsp;|&nbsp;</span>
            <a class="js-show-link comments-link dno" title="Expand to show all comments on this post" href="#" onclick="" role="button"></a>
        </div>         
    </div>
    </div>
</div>

                                    
<a name="51645561"></a>
<div id="answer-51645561" class="answer js-answer" data-answerid="51645561" data-parentid="34100018" data-score="1" data-position-on-page="3" data-highest-scored="0" data-question-has-accepted-highest-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer">
    <div class="post-layout">
        <div class="votecell post-layout--left">
            

<div class="js-voting-container d-flex jc-center fd-column ai-center gs4 fc-black-300" data-post-id="51645561" data-referrer="None">
        <button class="js-vote-up-btn flex--item s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-pressed="false" aria-label="Up vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" aria-describedby="--stacks-s-tooltip-w8b03jxw">
            <svg aria-hidden="true" class="svg-icon iconArrowUp" width="18" height="18" viewBox="0 0 18 18"><path d="M1 12h16L9 4z"></path></svg>
        </button><div id="--stacks-s-tooltip-w8b03jxw" class="s-popover s-popover__tooltip" role="tooltip">This answer is useful<div class="s-popover--arrow"></div></div>
        <input type="hidden" id="voteUpHash" value="70:3:31e,16:d051acb063904380,10:1724240176,16:b714a658ad9ef730,8:51645561,418317c935ece29e289167db87fb431acdcad57f6bffb76419fae6bc12c069c0">
        <div class="js-vote-count flex--item d-flex fd-column ai-center fc-theme-body-font fw-bold fs-subheading py4" itemprop="upvoteCount" data-value="1">
            1
        </div>
        <button class="js-vote-down-btn flex--item mb8 s-btn s-btn__muted s-btn__outlined bar-pill bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200" title="This answer is not useful" aria-pressed="false" aria-label="Down vote" data-selected-classes="fc-theme-primary bc-theme-primary bg-theme-primary-100" data-unselected-classes="bc-black-225 f:bc-theme-secondary-400 f:bg-theme-secondary-400 f:fc-black-050 h:bg-theme-primary-200">
            <svg aria-hidden="true" class="svg-icon iconArrowDown" width="18" height="18" viewBox="0 0 18 18"><path d="M1 6h16l-8 8z"></path></svg>
        </button>
        <input type="hidden" id="voteDownHash" value="70:3:31e,16:38f366c49832417d,10:1724240176,16:8dae49237ed8f6af,8:51645561,afddcd7a081897a17abeb1ca16d92d5c74fe9c4f0aec0040d03f4279c6be18aa">


        
<button class="js-saves-btn s-btn s-btn__unset c-pointer py4" type="button" id="saves-btn-51645561" data-controller="s-tooltip" data-s-tooltip-placement="right" data-s-popover-placement="" aria-pressed="false" data-post-id="51645561" data-post-type-id="2" data-user-privilege-for-post-click="0" aria-controls="" data-s-popover-auto-show="false" aria-describedby="--stacks-s-tooltip-cryludzl">
    <svg aria-hidden="true" class="fc-theme-primary-400 js-saves-btn-selected d-none svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
    <svg aria-hidden="true" class="js-saves-btn-unselected svg-icon iconBookmarkAlt" width="18" height="18" viewBox="0 0 18 18"><path d="m9 10.6 4 2.66V3H5v10.26zM3 17V3c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v14l-6-4z"></path></svg>
</button><div id="--stacks-s-tooltip-cryludzl" class="s-popover s-popover__tooltip" role="tooltip">Save this answer.<div class="s-popover--arrow"></div></div>







            <div class="js-accepted-answer-indicator flex--item fc-green-400 py6 mtn8 d-none" data-s-tooltip-placement="right" title="Loading when this answer was accepted…" tabindex="0" role="note" aria-label="Accepted">
                <div class="ta-center">
                    <svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8z"></path></svg>
                </div>
            </div>

    
    <a class="js-post-issue flex--item s-btn s-btn__unset c-pointer py6 mx-auto" href="/posts/51645561/timeline" data-shortcut="T" data-ks-title="timeline" data-controller="s-tooltip" data-s-tooltip-placement="right" aria-label="Timeline" aria-describedby="--stacks-s-tooltip-2i5y4sj4"><svg aria-hidden="true" class="mln2 mr0 svg-icon iconHistory" width="19" height="18" viewBox="0 0 19 18"><path d="M3 9a8 8 0 1 1 3.73 6.77L8.2 14.3A6 6 0 1 0 5 9l3.01-.01-4 4-4-4zm7-4h1.01L11 9.36l3.22 2.1-.6.93L10 10z"></path></svg></a><div id="--stacks-s-tooltip-2i5y4sj4" class="s-popover s-popover__tooltip" role="tooltip">Show activity on this post.<div class="s-popover--arrow"></div></div>

</div>

        </div>

        

<div class="answercell post-layout--right">
    
    <div class="s-prose js-post-body" itemprop="text">
<p>I did a benchmark test that show me it's better to choose more specific selectors. But generally the difference is not that much great.</p>
<p>I tested this HTML :</p>
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">&lt;div id=<span class="hljs-string">"my-id"</span>&gt;
    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"grand"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-class"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> I like carrots! <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
&lt;/div&gt;
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>
</code></pre>
<p>With 8 different selectors :</p>
<pre class="lang-js s-code-block"><code data-highlighted="yes" class="hljs language-javascript">$(<span class="hljs-string">' div#my-id div.grand div.my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-1</span>
$(<span class="hljs-string">' #my-id .grand div.my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-2</span>
$(<span class="hljs-string">' #my-id .grand .my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-3</span>
$(<span class="hljs-string">' div#my-id div.my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-4</span>
$(<span class="hljs-string">' #my-id div.my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-5</span>
$(<span class="hljs-string">' #my-id .my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-6</span>
$(<span class="hljs-string">' div.my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-7</span>
$(<span class="hljs-string">' .my-class '</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"background-color"</span>, <span class="hljs-string">"#cccccc"</span>); <span class="hljs-comment">//case-8</span>
</code></pre>
<p><a href="https://i.sstatic.net/53GYlsZH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/53GYlsZH.png" alt="enter image description here"></a></p>
<p>You can see the result <a href="https://www.measurethat.net/Benchmarks/ShowResult/29297" rel="nofollow noreferrer">here</a>.</p>
    </div>
    <div class="mt24">
        <div class="d-flex fw-wrap ai-start jc-end gs8 gsy">
            <time itemprop="dateCreated" datetime="2018-08-02T04:33:45"></time>
            <div class="flex--item mr16" style="flex: 1 1 100px;">
                


<div class="js-post-menu pt2" data-post-id="51645561" data-post-type-id="2">

    <div class="d-flex gs8 s-anchors s-anchors__muted fw-wrap">

        <div class="flex--item">
            <a href="/a/51645561" rel="nofollow" itemprop="url" class="js-share-link js-gps-track" title="Short permalink to this answer" data-gps-track="post.click({ item: 2, priv: 0, post_type: 2 })" data-controller="se-share-sheet s-popover" data-se-share-sheet-title="Share a link to this answer" data-se-share-sheet-subtitle="" data-se-share-sheet-post-type="answer" data-se-share-sheet-social="facebook twitter devto" data-se-share-sheet-location="2" data-se-share-sheet-license-url="https%3a%2f%2fcreativecommons.org%2flicenses%2fby-sa%2f4.0%2f" data-se-share-sheet-license-name="CC BY-SA 4.0" data-s-popover-placement="bottom-start" aria-controls="se-share-sheet-3" data-action=" s-popover#toggle se-share-sheet#preventNavigation s-popover:show->se-share-sheet#willShow s-popover:shown->se-share-sheet#didShow" aria-expanded="false">Share</a><div class="s-popover z-dropdown s-anchors s-anchors__default" style="width: unset; max-width: 28em;" id="se-share-sheet-3"><div class="s-popover--arrow"></div><div><label for="share-sheet-input-se-share-sheet-3"><span class="js-title fw-bold">Share a link to this answer</span> <span class="js-subtitle"></span></label></div><div class="my8"><input type="text" id="share-sheet-input-se-share-sheet-3" class="js-input s-input wmn3 sm:wmn-initial bc-black-300 bg-white fc-black-600" readonly=""></div><div class="d-flex jc-space-between ai-center mbn4"><button class="js-copy-link-btn s-btn s-btn__link js-gps-track" data-gps-track="">Copy link</button><a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license" class="js-license s-block-link w-auto" target="_blank" title="The current license for this post: CC BY-SA 4.0">CC BY-SA 4.0</a><div class="js-social-container d-none"></div></div></div>
        </div>


                    <div class="flex--item">
                        <a href="/posts/51645561/edit" class="js-suggest-edit-post js-gps-track" data-gps-track="post.click({ item: 6, priv: 0, post_type: 2 })" title="">Improve this answer</a>
                    </div>

                <div class="flex--item">
                    <button type="button" id="btnFollowPost-51645561" class="s-btn s-btn__link js-follow-post js-follow-answer js-gps-track" data-gps-track="post.click({ item: 14, priv: 0, post_type: 2 })" data-controller="s-tooltip " data-s-tooltip-placement="bottom" data-s-popover-placement="bottom" aria-controls="" aria-describedby="--stacks-s-tooltip-l3geov96">
                        Follow
                        <input type="hidden" id="voteFollowHash" value="70:3:31e,16:2ef81341b7dec0ae,10:1724240176,16:ee017d7d36600d21,8:51645561,1421f7c75b96b693fe2f06adf439597e71c11c839efcc015d340f33817f2dd31">
                    </button><div id="--stacks-s-tooltip-l3geov96" class="s-popover s-popover__tooltip" role="tooltip">Follow this answer to receive notifications<div class="s-popover--arrow"></div></div>
                </div>






    </div>
    <div class="js-menu-popup-container"></div>
</div>
            </div>
            <div class="post-signature flex--item fl0">
<div class="user-info ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            <a href="/posts/51645561/revisions" title="show all edits to this post" class="js-gps-track" data-gps-track="post.click({ item: 4, priv: 0, post_type: 2 })">edited <span title="2024-04-26 15:33:26Z" class="relativetime">Apr 26 at 15:33</span></a>
        </div>
        
    </div>
    <div class="user-gravatar32">
        
    </div>
    <div class="user-details">
        
        <div class="-flair">
            
        </div>
    </div>
</div>
            </div>


            <div class="post-signature flex--item fl0">
                <div class="user-info user-hover ">
    <div class="d-flex ">
        <div class="user-action-time fl-grow1">
            answered <span title="2018-08-02 04:33:45Z" class="relativetime">Aug 2, 2018 at 4:33</span>
        </div>
        
    </div>
    <div class="user-gravatar32">
        <a href="/users/4996904/bahman-parsa-manesh"><div class="gravatar-wrapper-32"><img src="https://lh6.googleusercontent.com/-CS-BpAH5Dno/AAAAAAAAAAI/AAAAAAAAABE/WZAt2H-9R6I/photo.jpg?sz=64" alt="Bahman Parsa Manesh's user avatar" width="32" height="32" class="bar-sm"></div></a>
    </div>
    <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="/users/4996904/bahman-parsa-manesh">Bahman Parsa Manesh</a><span class="d-none" itemprop="name">Bahman Parsa Manesh</span>
        <div class="-flair">
            <span class="reputation-score" title="reputation score " dir="ltr">2,370</span><span title="3 gold badges" aria-hidden="true"><span class="badge1"></span><span class="badgecount">3</span></span><span class="v-visible-sr">3 gold badges</span><span title="18 silver badges" aria-hidden="true"><span class="badge2"></span><span class="badgecount">18</span></span><span class="v-visible-sr">18 silver badges</span><span title="35 bronze badges" aria-hidden="true"><span class="badge3"></span><span class="badgecount">35</span></span><span class="v-visible-sr">35 bronze badges</span>
        </div>
    </div>
</div>


            </div>
        </div>
        
    
    </div>
    
</div>




            <span class="d-none" itemprop="commentCount">3</span> 
    <div class="post-layout--right js-post-comments-component">
        <div id="comments-51645561" class="comments js-comments-container bt bc-black-200 mt12 " data-post-id="51645561" data-min-length="15">
            <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true">

                        <li id="comment-126084506" class="comment js-comment " data-comment-id="126084506" data-comment-owner-id="13008066" data-comment-score="2">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
                    <span title="number of 'useful comment' votes received" class="cool">2</span>
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">Your test is flawed. The first three cases are looking for <code>.my-class</code> inside of <code>.parent</code>, which doesn't exist. Case 8 is actually the fastest successful test.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/13008066/kris-paulsen" title="81 reputation" class="comment-user">Kris Paulsen</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment126084506_51645561">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2022-03-03 01:30:53Z, License: CC BY-SA 4.0" class="relativetime-clean">Mar 3, 2022 at 1:30</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-138123429" class="comment js-comment " data-comment-id="138123429" data-comment-owner-id="12355272" data-comment-score="1">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
                    <span title="number of 'useful comment' votes received" class="cool">1</span>
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">Please add your results directly in your answer instead of only linking to it. In the future the link might be broken rendering your answer incomplete.</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/12355272/robin-bastiaan" title="652 reputation" class="comment-user">Robin Bastiaan</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment138123429_51645561">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2024-04-18 11:18:55Z, License: CC BY-SA 4.0" class="relativetime-clean">Apr 18 at 11:18</span>
                </a></span>
            </div>
        </div>
    </li>
    <li id="comment-138201825" class="comment js-comment " data-comment-id="138201825" data-comment-owner-id="4996904" data-comment-score="0">
        <div class="js-comment-actions comment-actions">
            <div class="comment-score js-comment-score js-comment-edit-hide">
            </div>
        </div>
        <div class="comment-text  js-comment-text-and-form">
            <div class="comment-body js-comment-edit-hide">
                
                <span class="comment-copy">@KrisPaulsen You are right. I updated</span>
                
                <div class="d-inline-flex ai-center">&nbsp;<a href="/users/4996904/bahman-parsa-manesh" title="2,370 reputation" class="comment-user">Bahman Parsa Manesh</a>
                </div>
                <span class="comment-date" dir="ltr"><a class="comment-link" href="#comment138201825_51645561">
                    <span class="v-visible-sr">Commented</span>
                    <span title="2024-04-26 15:34:11Z, License: CC BY-SA 4.0" class="relativetime-clean">Apr 26 at 15:34</span>
                </a></span>
            </div>
        </div>
    </li>

            </ul>
	    </div>

        <div id="comments-link-51645561" data-rep="50" data-anon="true">
                    <a class="js-add-link comments-link disabled-link" title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”." href="#" role="button">Add a comment</a>
                <span class="js-link-separator dno">&nbsp;|&nbsp;</span>
            <a class="js-show-link comments-link dno" title="Expand to show all comments on this post" href="#" onclick="" role="button"></a>
        </div>         
    </div>
    </div>
</div>


                        <a name="new-answer"></a>
                            <form id="post-form" action="/questions/34100018/answer/submit" method="post" class="js-add-answer-component post-form">
                                <input type="hidden" id="post-id" value="34100018">
                                <input type="hidden" id="qualityBanWarningShown" name="qualityBanWarningShown" value="false">
                                <input type="hidden" name="referrer" value="https://www.google.com/">
                                <h2 class="space" id="your-answer-header">
                                    Your Answer
                                </h2>
<div id="post-editor" class="post-editor js-post-editor d-flex fd-column g4">


        <div class="ps-relative">
            <div class="wmd-container mb8">
                <div id="wmd-button-bar" class="wmd-button-bar btr-sm"><ul id="wmd-button-row" class="wmd-button-row"><li id="wmd-bold-button" class="wmd-button" style="left: 0px;"><span style="background-position: 0px -20px;"></span></li><li id="wmd-italic-button" class="wmd-button" style="left: 25px;"><span style="background-position: -20px -20px;"></span></li><li id="wmd-spacer1" class="wmd-spacer" style="left: 50px;"><span style="background-position: -40px -20px;"></span></li><li id="wmd-link-button" class="wmd-button" style="left: 75px;"><span style="background-position: -40px -20px;"></span></li><li id="wmd-quote-button" class="wmd-button" style="left: 100px;"><span style="background-position: -60px -20px;"></span></li><li id="wmd-code-button" class="wmd-button" style="left: 125px;"><span style="background-position: -80px -20px;"></span></li><li id="wmd-spacer2" class="wmd-spacer" style="left: 150px;"><span style="background-position: -100px -20px;"></span></li><li id="wmd-olist-button" class="wmd-button" style="left: 175px;"><span style="background-position: -100px -20px;"></span></li><li id="wmd-ulist-button" class="wmd-button" style="left: 200px;"><span style="background-position: -120px -20px;"></span></li><li id="wmd-heading-button" class="wmd-button" style="left: 225px;"><span style="background-position: -140px -20px;"></span></li><li id="wmd-hr-button" class="wmd-button" style="left: 250px;"><span style="background-position: -160px -20px;"></span></li><li id="wmd-spacer3" class="wmd-spacer" style="left: 275px;"><span style="background-position: -180px -20px;"></span></li><li id="wmd-undo-button" class="wmd-button" style="left: 300px;"><span style="background-position: -180px -20px;"></span></li><li id="wmd-redo-button" class="wmd-button" style="left: 325px;"><span style="background-position: -200px -20px;"></span></li><li class="wmd-spacer wmd-spacer-max"></li></ul></div>
                    <div class="ai-content-policy-notice js-ai-policy-notice fc-black p8 bl br bc-black-300 d-none" aria-hidden="true">
                        <div class="d-flex jc-space-between ac-center gsx gs2">
                            <p class="flex--item as-center"><b>Reminder:</b> Answers generated by artificial intelligence tools are not allowed on Stack Overflow. <a href="/help/gen-ai-policy">Learn more</a></p>
                            <button class="flex--item js-dismiss-ai-banner s-btn s-btn__sm s-btn__icon fc-black"><svg aria-hidden="true" class="svg-icon iconClearSm" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41 10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path></svg></button>
                        </div>
                    </div>
                    <input type="hidden" name="AIPolicyNoticeShown" value="true">
                <div class="js-stacks-validation">
                    <div class="ps-relative">
                        <textarea id="wmd-input" name="post-text" class="wmd-input s-input bar0 js-post-body-field" data-editor-type="wmd" data-post-type-id="2" cols="92" rows="15" aria-labelledby="your-answer-header" tabindex="101" data-min-length=""></textarea>
                    </div>
                    <div class="s-input-message mt4 d-none js-stacks-validation-message"></div>
                </div>
            </div>
        </div>

    <aside class="d-flex ai-start jc-space-between js-answer-help s-notice s-notice__warning pb0 pr4 pt4 mb8 d-none" role="status" aria-hidden="true">
    <div class="flex--item pt8">
        <p>Thanks for contributing an answer to Stack Overflow!</p><ul><li>Please be sure to <em>answer the question</em>. Provide details and share your research!</li></ul><p>But <em>avoid</em></p><ul><li>Asking for help, clarification, or responding to other answers.</li><li>Making statements based on opinion; back them up with references or personal experience.</li></ul><p>To learn more, see our <a href="/help/how-to-answer">tips on writing great answers</a>.</p>
    </div>
    <button class="flex--item js-answer-help-close-btn s-btn s-btn__muted fc-black-600">
        <svg aria-hidden="true" class="svg-icon iconClear" width="18" height="18" viewBox="0 0 18 18"><path d="M15 4.41 13.59 3 9 7.59 4.41 3 3 4.41 7.59 9 3 13.59 4.41 15 9 10.41 13.59 15 15 13.59 10.41 9z"></path></svg>
    </button>
</aside>



    <div>
        <div id="draft-saved" class="fc-success h24" style="display:none;">Draft saved</div>
        <div id="draft-discarded" class="fc-error h24" style="display:none;">Draft discarded</div>
    </div>


            <div id="wmd-preview" class="s-prose mb16 wmd-preview js-wmd-preview"></div>
            <div></div>

        <div class="edit-block">
            <input id="fkey" name="fkey" type="hidden" value="d8669c2b82a8fd4013379493e4103fc6bf2b2018101f6f301103dee9f17d809c">
            <input id="author" name="author" type="text">
        </div>

</div>


                                <div class="ps-relative">
                                                    <div class="form-item new-post-login p0 my16">
                <div class="d-flex gs16 md:fd-column new-login-form">
                    <div class="d-flex fd-column w50 md:w-auto gsy gs8 jc-space-between new-login-left">
                        <h3 class="flex--item fs-title">Sign up or <a id="login-link" href="/users/login?ssrc=question_page&amp;returnurl=https%3a%2f%2fstackoverflow.com%2fquestions%2f34100018%2fselector-for-best-performance-in-jquery%23new-answer">log in</a></h3>
                        <div class="flex--item s-btn s-btn__muted s-btn__outlined s-btn__icon google-login" data-ga="[&quot;sign up&quot;,&quot;Sign Up Started - Google&quot;,&quot;New Post&quot;,null,null]">
                            <svg aria-hidden="true" class="native svg-icon iconGoogle" width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #4ba0f4;"></path><path fill="#34A853" d="M8.98 17c2.16 0 3.97-.72 5.3-1.94l-2.6-2a4.8 4.8 0 0 1-7.18-2.54H1.83v2.07A8 8 0 0 0 8.98 17" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #62cf7f;"></path><path fill="#FBBC05" d="M4.5 10.52a4.8 4.8 0 0 1 0-3.04V5.41H1.83a8 8 0 0 0 0 7.18z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #fbc31e;"></path><path fill="#EA4335" d="M8.98 4.18c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 5.4L4.5 7.49a4.8 4.8 0 0 1 4.48-3.3" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #eb5043;"></path></svg> Sign up using Google
                        </div>
                        <div class="flex--item s-btn s-btn__muted s-btn__outlined s-btn__icon stackexchange-login" data-ga="[&quot;sign up&quot;,&quot;Sign Up Navigation&quot;,&quot;New Post&quot;,null,null]">
                            <svg aria-hidden="true" class="native svg-icon iconGlyphXSm" width="18" height="18" viewBox="0 0 18 18"><path fill="#BCBBBB" d="M14 16v-5h2v7H2v-7h2v5z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #bdb8af;"></path><path fill="#F48024" d="m12.09.72-1.21.9 4.5 6.07 1.22-.9zM5 15h8v-2H5zm9.15-5.87L8.35 4.3l.96-1.16 5.8 4.83zm-7.7-1.47 6.85 3.19.63-1.37-6.85-3.2zm6.53 5L5.4 11.39l.38-1.67 7.42 1.48z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #f58a35;"></path></svg> Sign up using Email and Password
                        </div>
                    </div>
                    <input type="hidden" name="use-facebook" class="use-facebook" value="false">
                    <input type="hidden" name="use-google" class="use-google" value="false">
                    <button type="button" class="d-none js-submit-openid">Submit</button>
                    <div class="d-flex gsy gs8 fd-column w50 md:w-auto new-login-right form-item p0">
                                <h3 class="flex--item fs-title">Post as a guest</h3>
            <div class="flex--item">
                <div class="d-flex gs4 gsy fd-column">
                    <label class="s-label" for="display-name">Name</label>
                    <div class="d-flex ps-relative">
                        <input class="s-input" id="display-name" name="display-name" maxlength="30" type="text" value="" tabindex="105" placeholder="">
                    </div>
                </div>
            </div>
            <div class="flex--item">
                <div class="d-flex gs4 gsy fd-column">
                    <div class="flex--item">
                        <div class="d-flex gs2 gsy fd-column">
                            <label class="flex--item s-label" for="m-address">Email</label>
                            <p class="flex--item s-description">Required, but never shown</p>
                        </div>
                    </div>
                    <div class="d-flex ps-relative">
                        <input class="s-input js-post-email-field" id="m-address" name="m-address" type="text" value="" size="40" tabindex="106" placeholder="">
                    </div>
                </div>
            </div>

                    </div>
                </div>
            </div>
            <noscript>
                        <h3 class="flex--item fs-title">Post as a guest</h3>
            <div class="flex--item">
                <div class="d-flex gs4 gsy fd-column">
                    <label class="s-label" for="display-name">Name</label>
                    <div class="d-flex ps-relative">
                        <input class="s-input" id="display-name" name="display-name" maxlength="30" type="text" value="" tabindex="105" placeholder="" />
                    </div>
                </div>
            </div>
            <div class="flex--item">
                <div class="d-flex gs4 gsy fd-column">
                    <div class="flex--item">
                        <div class="d-flex gs2 gsy fd-column">
                            <label class="flex--item s-label" for="m-address">Email</label>
                            <p class="flex--item s-description">Required, but never shown</p>
                        </div>
                    </div>
                    <div class="d-flex ps-relative">
                        <input class="s-input js-post-email-field" id="m-address" name="m-address" type="text" value="" size="40" tabindex="106" placeholder="" />
                    </div>
                </div>
            </div>

            </noscript>

                                </div>

                                    <div class="form-submit clear-both d-flex gsx gs4">
                                        <button id="submit-button" class="flex--item s-btn s-btn__filled s-btn__icon" type="submit" tabindex="120" autocomplete="off">
                                            Post Your Answer
                                        </button>
                                        <button class="flex--item s-btn s-btn__danger discard-answer dno">
                                            Discard
                                        </button>
                                            <p class="privacy-policy-agreement">
                                                By clicking “Post Your Answer”, you agree to our <a href="https://stackoverflow.com/legal/terms-of-service/public" name="tos" target="_blank" class="-link">terms of service</a> and acknowledge you have read our <a href="https://stackoverflow.com/legal/privacy-policy" name="privacy" target="_blank" class="-link">privacy policy</a>.<input type="hidden" name="legalLinksShown" value="1">
                                            </p>
                                    </div>
                                    <div class="js-general-error general-error clear-both d-none" aria-live="polite"></div>
                            </form>


                            <h2 class="bottom-notice" data-loc="1">
                                <div>
Not the answer you're looking for? Browse other questions tagged <ul class="ml0 list-ls-none js-post-tag-list-wrapper d-inline"><li class="d-inline mr4 js-post-tag-list-item"><a href="/questions/tagged/jquery" class="s-tag post-tag" title="show questions tagged 'jquery'" aria-label="show questions tagged 'jquery'" rel="tag" aria-labelledby="tag-jquery-tooltip-container" data-tag-menu-origin="Unknown">jquery</a></li><li class="d-inline mr4 js-post-tag-list-item"><a href="/questions/tagged/jquery-selectors" class="s-tag post-tag" title="show questions tagged 'jquery-selectors'" aria-label="show questions tagged 'jquery-selectors'" rel="tag" aria-labelledby="tag-jquery-selectors-tooltip-container" data-tag-menu-origin="Unknown">jquery-selectors</a></li></ul> or <a href="/questions/ask">ask your own question</a>.                                </div>
                            </h2>
                                    
                </div>
            </div>

            
<div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar">
        

    
    <div class="s-sidebarwidget s-sidebarwidget__yellow s-anchors s-anchors__grayscale mb16" data-tracker="cb=1">
        <ul class="d-block p0 m0">
                        <li class="s-sidebarwidget--header s-sidebarwidget__small-bold-text d-flex fc-black-500 d:fc-black-600 bb bbw1">
                            The Overflow Blog
                        </li>
        <li class="s-sidebarwidget--item d-flex px16">
            <div class="flex--item1 fl-shrink0">
<svg aria-hidden="true" class="va-text-top svg-icon iconPencilSm" width="14" height="14" viewBox="0 0 14 14"><path fill="#F1B600" d="m2 10.12 6.37-6.43 1.88 1.88L3.88 12H2z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ffc923;"></path><path fill="#E87C87" d="m11.1 1.71 1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #e77883;"></path></svg>            </div>
            <div class="flex--item wmn0 ow-break-word">
                <a href="https://stackoverflow.blog/2024/08/16/ilya-grigorik-shopify-ticket-bots-taxes-scale-software/?cb=1" class="js-gps-track" data-ga="[&quot;community bulletin board&quot;,&quot;The Overflow Blog&quot;,&quot;https://stackoverflow.blog/2024/08/16/ilya-grigorik-shopify-ticket-bots-taxes-scale-software/&quot;,null,null]" data-gps-track="communitybulletin.click({ priority: 1, position: 0, location: questionpage })">Battling ticket bots and untangling taxes at the frontiers of e-commerce</a>
            </div>
        </li>
        <li class="s-sidebarwidget--item d-flex px16">
            <div class="flex--item1 fl-shrink0">
<svg aria-hidden="true" class="va-text-top svg-icon iconPencilSm" width="14" height="14" viewBox="0 0 14 14"><path fill="#F1B600" d="m2 10.12 6.37-6.43 1.88 1.88L3.88 12H2z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #ffc923;"></path><path fill="#E87C87" d="m11.1 1.71 1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #e77883;"></path></svg>            </div>
            <div class="flex--item wmn0 ow-break-word">
                <a href="https://stackoverflow.blog/2024/08/20/ryan-dahl-deno-20-scale-improve-npm-nodejs/?cb=1" class="js-gps-track" data-ga="[&quot;community bulletin board&quot;,&quot;The Overflow Blog&quot;,&quot;https://stackoverflow.blog/2024/08/20/ryan-dahl-deno-20-scale-improve-npm-nodejs/&quot;,null,null]" data-gps-track="communitybulletin.click({ priority: 1, position: 1, location: questionpage })">Ryan Dahl explains why Deno had to evolve with version 2.0</a>
            </div>
        </li>
                        <li class="s-sidebarwidget--header s-sidebarwidget__small-bold-text d-flex fc-black-500 d:fc-black-600 bb bbw1">
                            Featured on Meta
                        </li>
        <li class="s-sidebarwidget--item d-flex px16">
            <div class="flex--item1 fl-shrink0">
<div class="favicon favicon-stackexchangemeta" title="Meta Stack Exchange"></div>            </div>
            <div class="flex--item wmn0 ow-break-word">
                <a href="https://meta.stackexchange.com/questions/401841/weve-made-changes-to-our-terms-of-service-privacy-policy-july-2024?cb=1" class="js-gps-track" data-ga="[&quot;community bulletin board&quot;,&quot;Featured on Meta&quot;,&quot;https://meta.stackexchange.com/questions/401841/weve-made-changes-to-our-terms-of-service-privacy-policy-july-2024&quot;,null,null]" data-gps-track="communitybulletin.click({ priority: 3, position: 2, location: questionpage })">We've made changes to our Terms of Service &amp; Privacy Policy - July 2024</a>
            </div>
        </li>
        <li class="s-sidebarwidget--item d-flex px16">
            <div class="flex--item1 fl-shrink0">
<div class="favicon favicon-stackexchangemeta" title="Meta Stack Exchange"></div>            </div>
            <div class="flex--item wmn0 ow-break-word">
                <a href="https://meta.stackexchange.com/questions/402121/bringing-clarity-to-status-tag-usage-on-meta-sites?cb=1" class="js-gps-track" data-ga="[&quot;community bulletin board&quot;,&quot;Featured on Meta&quot;,&quot;https://meta.stackexchange.com/questions/402121/bringing-clarity-to-status-tag-usage-on-meta-sites&quot;,null,null]" data-gps-track="communitybulletin.click({ priority: 3, position: 3, location: questionpage })">Bringing clarity to status tag usage on meta sites</a>
            </div>
        </li>
        <li class="s-sidebarwidget--item d-flex px16">
            <div class="flex--item1 fl-shrink0">
<div class="favicon favicon-stackoverflowmeta" title="Meta Stack Overflow"></div>            </div>
            <div class="flex--item wmn0 ow-break-word">
                <a href="https://meta.stackoverflow.com/questions/431273/feedback-requested-how-do-you-use-tag-hover-descriptions-for-curating-and-do-yo?cb=1" class="js-gps-track" title="Feedback requested: How do you use tag hover descriptions for curating and do you use the RSS feed feature?" data-ga="[&quot;community bulletin board&quot;,&quot;Featured on Meta&quot;,&quot;https://meta.stackoverflow.com/questions/431273/feedback-requested-how-do-you-use-tag-hover-descriptions-for-curating-and-do-yo&quot;,null,null]" data-gps-track="communitybulletin.click({ priority: 6, position: 4, location: questionpage })">Feedback requested: How do you use tag hover descriptions for curating and do...</a>
            </div>
        </li>
        </ul>
    </div>


<div class="js-zone-container zone-container-sidebar">
    <div id="dfp-tsb" class="everyonelovesstackoverflow everyoneloves__top-sidebar"></div>
		<div class="js-report-ad-button-container " style="width: 300px"></div>
</div>
<div class="js-zone-container zone-container-sidebar">
    <div id="dfp-msb" class="everyonelovesstackoverflow everyoneloves__mid-sidebar"></div>
		<div class="js-report-ad-button-container " style="width: 300px"></div>
</div>
<div id="hireme"></div>        <div class="module sidebar-linked">
	<h4 id="h-linked">Linked</h4>
	    <div class="linked" data-tracker="lq=1">
            <div class="spacer js-gps-track" data-gps-track="linkedquestion.click({ source_post_id: 34100018, target_question_id: 1839362, position: 0 })">
				<a href="https://stackoverflow.com/q/1839362?lq=1" title="Question score (upvotes - downvotes)">
					<div class="answer-votes answered-accepted default">46</div>
				</a>
				<a href="https://stackoverflow.com/questions/1839362/find-child-with-a-specific-class?noredirect=1&amp;lq=1" class="question-hyperlink">Find child with a specific class</a>
			</div>
            <div class="spacer js-gps-track" data-gps-track="linkedquestion.click({ source_post_id: 34100018, target_question_id: 6035348, position: 1 })">
				<a href="https://stackoverflow.com/q/6035348?lq=1" title="Question score (upvotes - downvotes)">
					<div class="answer-votes answered-accepted default">15</div>
				</a>
				<a href="https://stackoverflow.com/questions/6035348/fastest-selector-method-in-jquery-and-css-id-or-not?noredirect=1&amp;lq=1" class="question-hyperlink">Fastest selector method in jquery and CSS - ID or not?</a>
			</div>
            <div class="spacer js-gps-track" data-gps-track="linkedquestion.click({ source_post_id: 34100018, target_question_id: 67236069, position: 2 })">
				<a href="https://stackoverflow.com/q/67236069?lq=1" title="Question score (upvotes - downvotes)">
					<div class="answer-votes answered-accepted default">8</div>
				</a>
				<a href="https://stackoverflow.com/questions/67236069/fastest-possible-way-in-jquery-to-filter-radios-select-checkbox-together-s?noredirect=1&amp;lq=1" class="question-hyperlink">Fastest possible way in jQuery to filter "Radios + Select + Checkbox" together simultaneously</a>
			</div>
            <div class="spacer js-gps-track" data-gps-track="linkedquestion.click({ source_post_id: 34100018, target_question_id: 58723176, position: 3 })">
				<a href="https://stackoverflow.com/q/58723176?lq=1" title="Question score (upvotes - downvotes)">
					<div class="answer-votes answered-accepted default">0</div>
				</a>
				<a href="https://stackoverflow.com/questions/58723176/css-jquery-performance-is-it-better-to-provide-higher-resolution-selector?noredirect=1&amp;lq=1" class="question-hyperlink">CSS/jQuery performance - Is it better to provide higher resolution selector</a>
			</div>
	</div>
</div>


    


        <div class="module sidebar-related">
            <h4 id="h-related">Related</h4>
            <div class="related js-gps-related-questions" data-tracker="rq=3">
                    <div class="spacer" data-question-id="2355912">
                        <a href="https://stackoverflow.com/q/2355912?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">6</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/2355912/jquery-selector-what-is-faster?rq=3" class="question-hyperlink">jQuery selector - what is faster?</a>
                    </div>
                    <div class="spacer" data-question-id="3113827">
                        <a href="https://stackoverflow.com/q/3113827?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">7</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/3113827/best-performance-for-jquery-selector?rq=3" class="question-hyperlink">Best Performance for jQuery Selector</a>
                    </div>
                    <div class="spacer" data-question-id="3186614">
                        <a href="https://stackoverflow.com/q/3186614?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">2</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/3186614/optimizing-jquery-selectors-which-is-faster?rq=3" class="question-hyperlink">optimizing jQuery Selectors - Which is faster?</a>
                    </div>
                    <div class="spacer" data-question-id="4717032">
                        <a href="https://stackoverflow.com/q/4717032?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">10</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/4717032/most-efficient-way-to-use-selectors-in-jquery?rq=3" class="question-hyperlink">Most efficient way to use selectors in jQuery?</a>
                    </div>
                    <div class="spacer" data-question-id="7559247">
                        <a href="https://stackoverflow.com/q/7559247?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">1</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/7559247/most-efficient-jquery-selectors?rq=3" class="question-hyperlink">Most efficient jQuery selectors</a>
                    </div>
                    <div class="spacer" data-question-id="8163807">
                        <a href="https://stackoverflow.com/q/8163807?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">3</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/8163807/which-jquery-selector-is-more-efficient?rq=3" class="question-hyperlink">Which jQuery selector is more efficient?</a>
                    </div>
                    <div class="spacer" data-question-id="10534811">
                        <a href="https://stackoverflow.com/q/10534811?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">0</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/10534811/jquery-selector-performance?rq=3" class="question-hyperlink">jquery selector performance?</a>
                    </div>
                    <div class="spacer" data-question-id="10722979">
                        <a href="https://stackoverflow.com/q/10722979?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes default">0</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/10722979/which-way-to-use-a-jquery-selector-is-better-when-it-comes-to-performace?rq=3" class="question-hyperlink">Which way to use a jQuery selector is better when it comes to performace?</a>
                    </div>
                    <div class="spacer" data-question-id="54254918">
                        <a href="https://stackoverflow.com/q/54254918?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">1</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/54254918/what-selector-is-more-efficient?rq=3" class="question-hyperlink">What selector is more efficient</a>
                    </div>
                    <div class="spacer" data-question-id="55304355">
                        <a href="https://stackoverflow.com/q/55304355?rq=3" title="Question score (upvotes - downvotes)">
                            <div class="answer-votes answered-accepted default">1</div>
                        </a>
                        <a href="https://stackoverflow.com/questions/55304355/which-jquery-selector-for-multiple-elements-is-better-optimized?rq=3" class="question-hyperlink">Which jQuery selector for multiple elements is better optimized</a>
                    </div>
            </div>
        </div>
    <div id="hot-network-questions" class="module tex2jax_ignore">
    <h4>
        <a href="https://stackexchange.com/questions?tab=hot" class="js-gps-track s-link s-link__inherit" data-gps-track="posts_hot_network.click({ item_type:1, location:11 })">
            Hot Network Questions
        </a>
    </h4>
    <ul>
            <li>
                <div class="favicon favicon-rpg" title="Role-playing Games Stack Exchange"></div><a href="https://rpg.stackexchange.com/questions/213077/can-mending-be-used-to-attach-the-unbroken-ends-of-a-pole-together" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:122 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Can mending be used to attach the unbroken ends of a pole together?
                </a>

            </li>
            <li>
                <div class="favicon favicon-mathoverflow" title="MathOverflow"></div><a href="https://mathoverflow.net/questions/477278/a-natural-automorphism-of-a-finite-group-with-two-generators" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:504 }); posts_hot_network.click({ item_type:2, location:11 })">
                    A natural automorphism of a finite group with two generators?
                </a>

            </li>
            <li>
                <div class="favicon favicon-academia" title="Academia Stack Exchange"></div><a href="https://academia.stackexchange.com/questions/213009/is-math-a-bad-discipline-for-teaching-jobs-or-is-it-just-me" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:415 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Is math a bad discipline for teaching jobs or is it just me?
                </a>

            </li>
            <li>
                <div class="favicon favicon-space" title="Space Exploration Stack Exchange"></div><a href="https://space.stackexchange.com/questions/66679/has-any-spacecraft-ever-been-severely-damaged-by-a-micrometeriote" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:508 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Has any spacecraft ever been severely damaged by a micrometeriote?
                </a>

            </li>
            <li>
                <div class="favicon favicon-ell" title="English Language Learners Stack Exchange"></div><a href="https://ell.stackexchange.com/questions/356347/does-any-computers-you-have-refer-to-one-or-all-the-computers" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:481 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Does "any computer(s) you have" refer to one or all the computers?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-academia" title="Academia Stack Exchange"></div><a href="https://academia.stackexchange.com/questions/213044/what-should-i-34-f-do-about-my-rude-and-mean-supervisor-60s-f-when-i-want-to" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:415 }); posts_hot_network.click({ item_type:2, location:11 })">
                    What should I [34/F] do about my rude and mean supervisor [60s/F] when I want to finish my PhD?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-scifi" title="Science Fiction &amp; Fantasy Stack Exchange"></div><a href="https://scifi.stackexchange.com/questions/290953/book-in-which-a-hunter-from-texas-is-transported-to-a-magical-world-where-he-bec" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:186 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Book in which a hunter from Texas is transported to a magical world where he becomes the protector of two infant dragons
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-stackoverflow" title="Stack Overflow"></div><a href="https://stackoverflow.com/questions/78888919/why-does-the-size-of-a-struct-change-depending-on-whether-an-initial-value-is-us" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:1 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Why does the size of a struct change depending on whether an initial value is used?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-retrocomputing" title="Retrocomputing Stack Exchange"></div><a href="https://retrocomputing.stackexchange.com/questions/30548/which-basic-dialect-first-featured-a-single-character-comment-introducer" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:648 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Which BASIC dialect first featured a single-character comment introducer?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-physics" title="Physics Stack Exchange"></div><a href="https://physics.stackexchange.com/questions/825043/does-a-cube-under-high-pressure-transform-into-a-ball" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:151 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Does a cube under high pressure transform into a ball?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-space" title="Space Exploration Stack Exchange"></div><a href="https://space.stackexchange.com/questions/66684/how-can-flyby-missions-work" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:508 }); posts_hot_network.click({ item_type:2, location:11 })">
                    How can flyby missions work?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-mathoverflow" title="MathOverflow"></div><a href="https://mathoverflow.net/questions/477222/choosing-a-relative-large-density-subsequence-from-a-low-density-sequence" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:504 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Choosing a relative large density subsequence from a low density sequence
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-space" title="Space Exploration Stack Exchange"></div><a href="https://space.stackexchange.com/questions/66668/what-if-something-goes-wrong-during-the-seven-minutes-of-terror" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:508 }); posts_hot_network.click({ item_type:2, location:11 })">
                    What if something goes wrong during the seven minutes of terror?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-security" title="Information Security Stack Exchange"></div><a href="https://security.stackexchange.com/questions/278317/what-prevents-applications-from-misusing-private-keys" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:162 }); posts_hot_network.click({ item_type:2, location:11 })">
                    What prevents applications from misusing private keys?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-law" title="Law Stack Exchange"></div><a href="https://law.stackexchange.com/questions/104551/is-un-law-a-thing" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:617 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Is "UN law" a thing?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-scicomp" title="Computational Science Stack Exchange"></div><a href="https://scicomp.stackexchange.com/questions/44483/shape-functions-on-the-triangle-using-vertex-values-and-derivatives" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:363 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Shape functions on the triangle using vertex values and derivatives
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-politics" title="Politics Stack Exchange"></div><a href="https://politics.stackexchange.com/questions/88761/why-would-an-incumbent-politician-or-party-need-to-be-re-elected-to-fulfill-a-ca" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:475 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Why would an incumbent politician or party need to be re-elected to fulfill a campaign promise?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-puzzling" title="Puzzling Stack Exchange"></div><a href="https://puzzling.stackexchange.com/questions/127911/fitting-the-9th-piece-into-the-pizza-box" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:559 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Fitting the 9th piece into the pizza box
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-worldbuilding" title="Worldbuilding Stack Exchange"></div><a href="https://worldbuilding.stackexchange.com/questions/260990/could-a-gas-giant-still-be-low-on-the-horizon-from-the-equator-of-a-tidally-lock" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:579 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Could a gas giant still be low on the horizon from the equator of a tidally locked moon?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-travel" title="Travel Stack Exchange"></div><a href="https://travel.stackexchange.com/questions/190909/passport-small-damage-on-passport" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:273 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Passport - small damage on passport
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-space" title="Space Exploration Stack Exchange"></div><a href="https://space.stackexchange.com/questions/66681/did-anyone-ever-ask-neil-armstrong-whether-he-said-for-man-or-for-a-man" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:508 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Did anyone ever ask Neil Armstrong whether he said "for man" or "for a man?"
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-bicycles" title="Bicycles Stack Exchange"></div><a href="https://bicycles.stackexchange.com/questions/95213/road-tyre-on-gravel-bike-compaitability" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:126 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Road Tyre on Gravel Bike Compaitability
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-bicycles" title="Bicycles Stack Exchange"></div><a href="https://bicycles.stackexchange.com/questions/95193/is-the-garmin-edge-530-still-a-good-choice-for-a-beginner-in-2024" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:126 }); posts_hot_network.click({ item_type:2, location:11 })">
                    Is the Garmin Edge 530 still a good choice for a beginner in 2024?
                </a>

            </li>
            <li class="js-hidden" style="">
                <div class="favicon favicon-movies" title="Movies &amp; TV Stack Exchange"></div><a href="https://movies.stackexchange.com/questions/123245/how-old-were-phineas-and-ferb-what-year-was-it" class="js-gps-track question-hyperlink mb0" data-gps-track="site.switch({ item_type:11, target_site:367 }); posts_hot_network.click({ item_type:2, location:11 })">
                    How old were Phineas and Ferb? What year was it?
                </a>

            </li>
    </ul>

        
</div>

                <div id="feed-link" class="js-feed-link">
        <a href="/feeds/question/34100018" title="Feed of this question and its answers">
            <svg aria-hidden="true" class="fc-orange-400 svg-icon iconRss" width="18" height="18" viewBox="0 0 18 18"><path d="M3 1a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 1.5c6.9 0 12.5 5.6 12.5 12.5H13C13 9.55 8.45 5 3 5zm0 5c4.09 0 7.5 3.41 7.5 7.5H8c0-2.72-2.28-5-5-5zm0 5c1.36 0 2.5 1.14 2.5 2.5H3z"></path></svg>
            Question feed
        </a>
    </div>
    <aside class="s-modal js-feed-link-modal" tabindex="-1" role="dialog" aria-labelledby="feed-modal-title" aria-describedby="feed-modal-description" aria-hidden="true">
        <div class="s-modal--dialog js-modal-dialog wmx4" role="document" data-controller="se-draggable">
            <h1 class="s-modal--header fw-bold js-first-tabbable c-move" id="feed-modal-title" data-se-draggable-target="handle" tabindex="0">
                Subscribe to RSS
            </h1>
            <div class="d-flex gs4 gsy fd-column">
                <div class="flex--item">
                    <label class="d-block s-label c-default" for="feed-url">
                        Question feed
                        <p class="s-description mt2" id="feed-modal-description">To subscribe to this RSS feed, copy and paste this URL into your RSS reader.</p>
                    </label>
                </div>
                <div class="d-flex ps-relative">
                    <input class="s-input" type="text" name="feed-url" id="feed-url" readonly="readonly" value="https://stackoverflow.com/feeds/question/34100018">
                    <svg aria-hidden="true" class="s-input-icon fc-orange-400 svg-icon iconRss" width="18" height="18" viewBox="0 0 18 18"><path d="M3 1a2 2 0 0 0-2 2v12c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm0 1.5c6.9 0 12.5 5.6 12.5 12.5H13C13 9.55 8.45 5 3 5zm0 5c4.09 0 7.5 3.41 7.5 7.5H8c0-2.72-2.28-5-5-5zm0 5c1.36 0 2.5 1.14 2.5 2.5H3z"></path></svg>
                </div>
            </div>
            <a class="s-modal--close s-btn s-btn__muted js-modal-close js-last-tabbable" href="#" aria-label="Close">
                <svg aria-hidden="true" class="svg-icon iconClearSm" width="14" height="14" viewBox="0 0 14 14"><path d="M12 3.41 10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path></svg>
            </a>
        </div>
    </aside>

</div>

    </div>
<noscript><div><img src="/posts/34100018/ivc/3f58?prg=26aa711d-1d04-4b0d-a539-dd2c5333fa2e" class="dno" alt="" width="0" height="0"></div></noscript><div style="display:none" id="js-codeblock-lang">lang-js</div></div>

                        


        </div>
    </div>

    <footer id="footer" class="site-footer js-footer theme-light__forced" role="contentinfo">
        <div class="site-footer--container">
                <div class="site-footer--logo">

                    <a href="https://stackoverflow.com" aria-label="Stack Overflow"><svg aria-hidden="true" class="native svg-icon iconGlyphMd" width="32" height="37" viewBox="0 0 32 37"><path fill="#BCBBBB" d="M26 33v-9h4v13H0V24h4v9z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #bdb8af;"></path><path fill="#F48024" d="m21.5 0-2.7 2 9.9 13.3 2.7-2zM26 18.4 13.3 7.8l2.1-2.5 12.7 10.6zM9.1 15.2l15 7 1.4-3-15-7zm14 10.79.68-2.95-16.1-3.35L7 23zM23 30H7v-3h16z" data-darkreader-inline-fill="" style="--darkreader-inline-fill: #f58a35;"></path></svg></a>
                </div>
            <nav class="site-footer--nav" aria-label="Footer">
                    <div class="site-footer--col">
                        <h5 class="-title"><a href="https://stackoverflow.com" class="js-gps-track" data-gps-track="footer.click({ location: 2, link: 15})">Stack Overflow</a></h5>
                        <ul class="-list js-primary-footer-links">
                            <li><a href="/questions" class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 16})">Questions</a></li>
                                <li><a href="/help" class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 3 })">Help</a></li>
                                <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 5 })" href="https://chat.stackoverflow.com/?tab=site&amp;host=stackoverflow.com">Chat</a></li>
                        </ul>
                    </div>
                    <div class="site-footer--col">
                        <h5 class="-title"><a href="https://stackoverflow.co/" class="js-gps-track" data-gps-track="footer.click({ location: 2, link: 19 })">Products</a></h5>
                        <ul class="-list">
                            <li><a href="https://stackoverflow.co/teams/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=footer&amp;utm_content=teams" class="js-gps-track -link" data-ga="[&quot;teams traffic&quot;,&quot;footer - site nav&quot;,&quot;stackoverflow.com/teams&quot;,null,{&quot;dimension4&quot;:&quot;teams&quot;}]" data-gps-track="footer.click({ location: 2, link: 29 })">Teams</a></li>
                            <li><a href="https://stackoverflow.co/advertising/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=footer&amp;utm_content=advertising" class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 21 })">Advertising</a></li>
                            <li><a href="https://stackoverflow.co/collectives/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=footer&amp;utm_content=collectives" class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 40 })">Collectives</a></li>
                            <li><a href="https://stackoverflow.co/advertising/employer-branding/?utm_medium=referral&amp;utm_source=stackoverflow-community&amp;utm_campaign=footer&amp;utm_content=talent" class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 20 })">Talent</a></li>
                        </ul>
                    </div>
                <div class="site-footer--col">
                    <h5 class="-title"><a class="js-gps-track" data-gps-track="footer.click({ location: 2, link: 1 })" href="https://stackoverflow.co/">Company</a></h5>
                    <ul class="-list">
                            <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 1 })" href="https://stackoverflow.co/">About</a></li>
                        <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 27 })" href="https://stackoverflow.co/company/press/">Press</a></li>
                            <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 9 })" href="https://stackoverflow.co/company/work-here/">Work Here</a></li>
                        <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 7 })" href="https://stackoverflow.com/legal">Legal</a></li>
                        <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 8 })" href="https://stackoverflow.com/legal/privacy-policy">Privacy Policy</a></li>
                        <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 37 })" href="https://stackoverflow.com/legal/terms-of-service/public">Terms of Service</a></li>
                            <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 13 })" href="/contact">Contact Us</a></li>
                            <li id="consent-footer-link"><button type="button" data-controller="cookie-settings" data-action="click->cookie-settings#toggle" class="s-btn s-btn__link py4 js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 38 })" data-consent-popup-loader="footer">Cookie Settings</button></li>
                        <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link: 39 })" href="https://stackoverflow.com/legal/cookie-policy">Cookie Policy</a></li>
                    </ul>
                </div>
                <div class="site-footer--col site-footer--categories-nav">
                    <div>
                        <h5 class="-title"><a href="https://stackexchange.com" data-gps-track="footer.click({ location: 2, link: 30 })">Stack Exchange Network</a></h5>
                        <ul class="-list">
                            <li>
                                <a href="https://stackexchange.com/sites#technology" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Technology
                                </a>
                            </li>
                            <li>
                                <a href="https://stackexchange.com/sites#culturerecreation" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Culture &amp; recreation
                                </a>
                            </li>
                            <li>
                                <a href="https://stackexchange.com/sites#lifearts" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Life &amp; arts
                                </a>
                            </li>
                            <li>
                                <a href="https://stackexchange.com/sites#science" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Science
                                </a>
                            </li>
                            <li>
                                <a href="https://stackexchange.com/sites#professional" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Professional
                                </a>
                            </li>
                            <li>
                                <a href="https://stackexchange.com/sites#business" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Business
                                </a>
                            </li>

                            <li class="mt16 md:mt0">
                                <a href="https://api.stackexchange.com/" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    API
                                </a>
                            </li>

                            <li>
                                <a href="https://data.stackexchange.com/" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 24 })">
                                    Data
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="site-footer--copyright fs-fine md:mt24">
                <ul class="-list -social md:mb8">
                    <li><a class="js-gps-track -link" data-gps-track="footer.click({ location: 2, link:4 })" href="https://stackoverflow.blog?blb=1">Blog</a></li>
                    <li><a href="https://www.facebook.com/officialstackoverflow/" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 31 })">Facebook</a></li>
                    <li><a href="https://twitter.com/stackoverflow" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 32 })">Twitter</a></li>
                    <li><a href="https://linkedin.com/company/stack-overflow" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 33 })">LinkedIn</a></li>
                    <li><a href="https://www.instagram.com/thestackoverflow" class="-link js-gps-track" data-gps-track="footer.click({ location: 2, link: 36 })">Instagram</a></li>
                </ul>

                <p class="md:mb0">
                    <span>Site design / logo © 2024 Stack Exchange Inc; </span>
                    <span>user contributions licensed under </span>
                    <a class="-link s-link td-underline" href="https://stackoverflow.com/help/licensing">CC BY-SA</a>
                    <span>. </span>
                    <span id="svnrev">rev&nbsp;2024.8.20.14194</span>
                </p>
            </div>
        </div>

    </footer>

Setup

const loopSize = 500000;
let elements = null;

Test runner

Ready to run.

Testing in
TestOps/sec
GetElementsByClassName
for (let i = 0; i < loopSize; i++)
	elements = document.getElementsByClassName("comment-text");
ready
QuerySelector class
for (let i = 0; i < loopSize; i++)
	elements = document.querySelector(".comment-text");
ready
QuerySelectorAll class
for (let i = 0; i < loopSize; i++)
	elements = document.querySelectorAll(".comment-text");
ready
getElementById getElementsByClassName
for (let i = 0; i < loopSize; i++)
{
	elements = document.getElementById("comment-126084506").getElementsByClassName("comment-text");
}
ready
querySelector with ID
for (let i = 0; i < loopSize; i++)
{
	elements = document.querySelector("#comment-126084506 .comment-text");
}
ready
querySelectorAll with ID
for (let i = 0; i < loopSize; i++)
{
	elements = document.querySelectorAll("#comment-126084506 .comment-text");
}
ready
querySelectorAll multiple classes same tag
for (let i = 0; i < loopSize; i++)
{
	elements = document.querySelectorAll(".comment-text.js-comment-text-and-form");
}
ready
getElementsByClassName multiple classes same tag
for (let i = 0; i < loopSize; i++)
{
	elements = document.getElementsByClassName("comment-text js-comment-text-and-form");
}
ready
querySelectorAll tagname plus class
for (let i = 0; i < loopSize; i++)
{
	elements = document.querySelectorAll("div.comment-text");
}
ready
getElementsByClassName then filter by tag
for (let i = 0; i < loopSize; i++)
{
	elements = Array.from(document.getElementsByClassName("comment-text")).filter(x => x.tagName == "DIV");
}
ready
getElementsByClassName then loop and find the ones with correct tag
for (let i = 0; i < loopSize; i++)
{
	const arr = [];
	elements = document.getElementsByClassName("comment-text");
	for (let element of elements)
		if (element.tagName == "DIV")
			arr.push(element);
	elements = arr;
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.