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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
The :last-of-type selectorCSSHow does Binding work in JavaScript?JavaScriptWordPress plugin development: How to fix a SQL injection?WordPressThe Types of DatabasesMiscellaneousWordPress: How to loop through ACF group fields?WordPressImplicit and Explicit Joins in Oracle SQLSQL/MySQLHow to create a multisite network in WordPress?WordPressCanvas Drawing in HTML5HTMLSQL Basics: What does the asterisk (*) mean in a query?SQL/MySQLSome SQL LIKE Operators We Need to Keep in MindSQL/MySQL10 Usability Blunders to AvoidUI/UXRIGHT JOIN in PostgresPostgres