Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • What is CSS attribute selectors ?

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 221
    Comment on it

    HI all,

    CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.

    Lets understand this with below example -

    I have a simple list with four list item

    <ul>
      <li>This list item has no class</li>
      <li class="red">This is a red list item</li>
      <li class="red dark example">This is a list item with 2 classes</li>
      <li class="text-red">This is a list item with red text</li>
    </ul>  
    

    So now if I use this method,

    li[class] {
      background-color: blue;
    }
    

    It will applied only which have any class, It means it will work with all, apart of first element because here the first element do not have any class.


    li[class="red"] { 
      background-color: green;
    }
    

    It will be applied on element which have exact same class name, which we will define in this method and in this example above and only second li will have green background .


    li[class~="example"] {
      background: pink;
    }
    

    Here if any class have name example this will be applied there but class name should be separate.


    li[class|="text"] {
      background-color: yellow;
    }
    

    This method is really very useful, for example if you have a class name text-red ( which class name have hyphen -) and use upper method then yellow background will apply will all text named classes.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: