Select elements by attribute in CSS

Question

Is it possible to select elements in CSS by their HTML5 data attributes  for example  data-role

User · Answer

It s worth noting CSS3 substring attribute selectors   attribute  value       starts with selector       Styles        attribute  value       ends with selector       Styles        attribute  value       contains selector       Styles

User · Answer

data-value         Attribute exists        data-value  foo          Attribute has this exact value        data-value   foo          Attribute value contains this value somewhere in it        data-value   foo          Attribute has this value in a space-separated list somewhere        data-value   foo          Attribute value starts with this        data-value   foo          Attribute value starts with this in a dash-separated list        data-value   foo          Attribute value ends with this

User · Answer

Is it possible to select elements in CSS by their HTML5 data attributes  This can easily be answered just by trying it  and the answer is  of course  yes  But this invariably leads us to the next question   Should we select elements in CSS by their HTML5 data attributes   There are conflicting opinions on this  In the  no  camp is  or at least was  back in 2014  CSS legend Harry Roberts  In the article  Naming UI components in OOCSS  he wrote   It   s important to note that although we can style HTML via its data-  attributes  we probably shouldn   t  data-  attributes are meant for holding data in markup  not for selecting on  This  from the HTML Living Standard  emphasis mine     quot Custom data attributes are intended to store custom data private to the page or application  for which there are no more appropriate attributes or elements  quot    The W3C spec was frustratingly vague on this point  but based purely on what it did and didn t say  I think Harry s conclusion was perfectly reasonable  Since then  plenty of articles have suggested that it s perfectly appropriate to use custom data attributes as styling hooks  including MDN s guide  Using data attributes  There s even a CSS methodology called CUBE CSS which has adopted the data attribute hook as the preferred way of adding styles to component  exceptions   known as modifiers in BEM   Thankfully  the WHATWG HTML Living Standard has since added a few more words and even some examples  emphasis mine    Custom data attributes are intended to store custom data  state  annotations  and similar  private to the page or application  for which there are no more appropriate attributes or elements    In this example  custom data attributes are used to store the result of a feature detection for PaymentRequest  which could be used in CSS to style a checkout page differently    Authors should carefully design such extensions so that when the attributes are ignored and any associated CSS dropped  the page is still usable    TL DR  Yes  it s okay to use data-  attributes in CSS selectors  provided the page is still usable without them

User · Answer

If you mean using an attribute selector  sure  why not    data-role  page            Styles        There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to  Note that  despite custom data attributes being a  new HTML5 feature     browsers typically don t have any problems supporting non-standard attributes  so you should be able to filter them with attribute selectors  and you don t have to worry about CSS validation either  as CSS doesn t care about non-namespaced attribute names as long as they don t break the selector syntax

User · Answer

You can combine multiple selectors and this is so cool knowing that you can select every attribute and attribute based on their value like href based on their values with CSS only    Attributes selectors allows you play around some extra with id and class attributes  Here is an awesome read on Attribute Selectors  Fiddle   x000D   x000D  a href  http   aamirshahzad net   title  Aamir     x000D    color  green  x000D    text-decoration  none  x000D    x000D   x000D  a id   google     x000D    color  red  x000D    x000D   x000D  a class   stack     x000D    color  yellow  x000D    x000D   lt a href  http   aamirshahzad net  title  Aamir  gt Aamir lt  a gt  x000D   lt br gt  x000D   lt a href  http   google com  id  google-link  title  Google  gt Google lt  a gt  x000D   lt br gt  x000D   lt a href  http   stackoverflow com  class  stack-link  title  stack  gt stack lt  a gt  x000D   x000D   x000D    Browser support  IE6   Chrome  Firefox  amp  Safari  You can check detail here

User · Answer

It s also possible to select attributes regardless of their content  in modern browsers  with      data-my-attribute          Styles        anything          Styles        For example  http   codepen io jasonm23 pen fADnu  Works on a very significant percentage of browsers   Note this can also be used in a JQuery selector  or using document querySelector

[css] Select elements by attribute in CSS

Examples related to css

Examples related to html

Examples related to css-selectors

Examples related to custom-data-attribute