Yogesh Chauhan's Blog

How to select an element using its ID without the high specificity of the ID selector?

in CSS on August 23, 2020

If we use an attribute selector to select an element by its ID then it will have a lower level of specificity than if it was selected with an ID selector. 

For e.g. We can target the same element with [id="ID_name"] and #ID_name but with lower specificity.

HTML


<div id="ID_name">...</div> 

CSS


#ID_name { ... } /* High specificity */

[id="ID_name"] { ... } /* Low specificity */

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Debugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHigher Order Functions in JavaScript with ExamplesJavaScriptfor @each loop in SCSSSCSSUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptHow to list all PHP variables to debug the script?PHPHow to remove WordPress TinyMCE Editor buttons?WordPressNATURAL JOIN in PostgresPostgresWordPress: How to add a Search Icon in Menus with toggle effect using jQuery?jQuerysubstring() Method in JavaScriptJavaScriptA complete diagram with building blocks of an Angular applicationAngularHow to invalidate all existing cookies using Security Keys in WordPress?WordPressAll different methods for accessing elements in the DOM using JavaScriptJavaScript