Yogesh Chauhan's Blog

Specificity of attribute selectors

in CSS on August 23, 2020

Attribute selectors have specificity same as class selector and pseudo class.

0-1-0

Here is W3's guide on Calculating a selector’s specificity: w3.org

Quoting W3 guide here,

A selector’s specificity is calculated for a given element as follows:

count the number of ID selectors in the selector (= A)
count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
count the number of type selectors and pseudo-elements in the selector (= C)
ignore the universal selector

Examples


*[type=radio] // 0-1-0

.class_name input[type="text"] { }  // 0-2-1

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
CSS backface-visibility PropertyCSSCreate a simple bar chart and column chart using pure CSS gridCSSCheck if mixin is being called in a style rule or not in SCSSSCSSINNER JOIN in PostgresPostgresfor @each loop in SCSSSCSSWhat is the best way to add JavaScript Code into HTML?HTMLEssential SQL Commands We Need to KnowSQL/MySQLHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLHow to enable and disable button using JavaScript?JavaScriptWhat are Identifiers in JavaScript?JavaScriptWhat’s a Log File and What are Log File Monitors?MiscellaneousWhat does Containment mean in React?React