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

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
PostgreSQL BETWEENPostgresRelative Length Units in CSSCSSHow to change style of all direct children of an element using jQuery?jQueryHow to create a pricing table using flex in CSS?CSSALTER DATABASE in PostgreSQLPostgresWhat’s new in Constructor in PHP 8?PHPWhat’s Interpolation in SCSS (Sass)?SCSSHow to create ‘share on LinkedIn’ link using just HTML?HTMLHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLHow to change value of a span tag using a reference from another div using jQuery?jQuery:in-range and :out-of-range selector in CSSCSS