InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS selectors

    Simple Selectors

    • type selectors
    • universal selector (*)
    • attribute presence and value selectors
    • attribute substring selectors
    • class selectors
    • two classes (.c1.c2)
    • id selectors

    Pseudo-classes

    • :link
    • :visited
    • :hover
    • :active
    • :focus
    • :target
    • :lang
    • :enabled and :disabled
    • :checked
    • :root
    • :nth-child
    • :nth-of-type
    • :nth-child vs :nth-of-type
    • :nth-last-child
    • :nth-last-of-type
    • :first-child
    • :first-of-type
    • :last-child
    • :last-of-type
    • :only-child
    • :only-of-type
    • :empty
    • :not

    Pseudo-elements

    • ::first-line
    • ::first-letter
    • ::before and ::after
    • ::placeholder

    Combinators

    • child vs descendant selector
    • adjacent sibling selector (E1 + E2)
    • general sibling selector (E1 ~ E2)

    Specificity

    • Selector specificity
     
    • Home
    • > Tutorials
    • > CSS
    • > CSS selectors

    CSS attribute presence and value selectors

    on Feb 14, 2016

    CSS attribute selector can be used to select DOM elements based on attribute presence of their values. We can use attribute selectors in multiple ways. These are some commonly used ways.

    [attribute] element has attribute
    [attribute=value] element has attribute=value
    [attribute~=value] element attribute contains word value (words should be whitespace separated)
    [attribute|=value] element attribute either equals value or begins with value and ten followed by –

    Some examples for attribute selectors:

    Attribute selector presence example

    Change color of disabled buttons (#form1 input[disabled])

    <style type="text/css">
      #form1 input[disabled] {color:lightgray;}
    </style>
    
    <form id="form1">
    <input type="text" value="textval" />
    <input type="button" value="button1" disabled />
    <input type="button" value="button2" />
    </form>
    
    refresh done
    try it online

    Attribute selector [attribute=value] example

    Change color of input type=button (#form1 input[type=button])

    <style type="text/css">
      #form1 input[type=button] {background-color:lightgreen;}
    </style>
    
    <form id="form1">
    <input type="text" value="textval" />
    <input type="button" value="button1" />
    <input type="button" value="button2" />
    </form>
    refresh done
    try it online

    Multiple attribute selector example

    Change color of input type=button when value=green (#form1 input[type=button][value=green])

    <style type="text/css">
      #form1 input[type=button][value=green] {background-color:green;}
    </style>
    
    <form id="form1">
    <input type="text" value="textval" />
    <input type="button" value="button1" />
    <input type="button" value="green" />
    </form>
    refresh done
    try it online

    Related

    • CSS type selectors - define style by element name
    • CSS universal selector
    • CSS attribute substring selectors
    • CSS class selectors - define style by class name
    • CSS - style for element having two classes (both)
    • CSS id selectors - define style by element id

    Specification

    • W3C CSS 3 attribute selectors specification

    Suggested posts:

    1. CSS attribute substring selectors
    2. CSS type selectors – define style by element name
    3. CSS id selectors – define style by element id
    4. CSS class selectors – define style by class name
    5. HTML5 – input placeholder
    6. CSS placeholder style
    7. Css :nth-child vs :nth-of-type
    8. HTML5 label tag examples
    Share this article: share on facebook share on linkedin tweet this submit to reddit
    Posted in Tutorials | Tagged CSS, CSS selectors, Tutorials, Web Development

    Follow InfoHeap

    facebook
    twitter
    googleplus
    • Browse site
    • Article Topics
    • Article archives
    • Recent Articles
    • Contact Us
    • Omoney
    Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

    Copyright © 2023 InfoHeap.

    Powered by WordPress