How to style a specific a href in css? [duplicate]

5 Answer(s)

    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.

    Professor Answered on October 18, 2020.
    Add Comment

      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

      Professor Answered on October 18, 2020.
      Add Comment

        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 */ } 
        Professor Answered on October 18, 2020.
        Add Comment

          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

          a[href="http://aamirshahzad.net"][title="Aamir"] {    color: green;    text-decoration: none;  }    a[id*="google"] {    color: red;  }    a[class*="stack"] {    color: yellow;  }
          <a href="http://aamirshahzad.net" title="Aamir">Aamir</a>  <br>  <a href="http://google.com" id="google-link" title="Google">Google</a>  <br>  <a href="http://stackoverflow.com" class="stack-link" title="stack">stack</a>

          Browser support:
          IE6+, Chrome, Firefox & Safari

          You can check detail here.

          Professor Answered on October 18, 2020.
          Add Comment
                [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 */ } 
            Professor Answered on October 18, 2020.
            Add Comment

            Your Answer

            By posting your answer, you agree to the privacy policy and terms of service.