Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Possible use case for ID selector in CSS?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #157990
    alanshortis
    Participant

    Say I want to apply a style to all search inputs, and I don’t want to have to assign a class to each one. I do this:

    input[type=search] {
    
    }
    

    But, I also have a primary search field which is to be styled differently to search fields that appear inside forms etc. Applying this styling with a class name has no effect (unless I use !important, which I don’t want to do), but using id works just fine.

    Has anyone else run in to this behavior? Since there is only ever a single primary search field on any page I would be inclined to just stick with an id selector, but if there is a way of using a class name I’d be interested to hear it.

    #158009
    magicspon
    Participant

    If you are using the attribute selector and you have multi search inputs on the page which need to have various styles, then you are going to have to use classes to overwrite those styles.

    If I were you I’d just apply a class to each of your input fields.

    If they all have some shared styles you could use the input[type=search] selector for just those bits.

    input[type=search]  {
      font: arial;
    }
    
    .search-primary {
      color: blue;
    }
    
    .search-secondary {
      color: yellow;
    }
    

    have fun…

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.