Jump to content

CSS Attribute Selectors Tutorial


Recommended Posts

i have been going through the CSS attribute selector tutorial and have encountered  problem i cannot resolve. I wrote my code as per the "try it yourself". As far as i can tell my code  is written identical to the CSS tutorial. Below is an example of what I wrote:

[target~="red"]  {border: 1px solid red;}

                     or

[title^="tulip"] {background-color: red;}

I set up a style sheet in notepad ++ and in my style sheet, the code in bold type remains black - which tells me my app isn't recognizing that bit of code as code. I have attached the style sheet so you can see what my code is doing.   I cannot figure out where I went wrong.  has anyone else encountered this? were you able to resolve it and how?  thanks!

 

attributeselectors-styles.css

Link to post
Share on other sites

Without the HTML itself, I can't tell you why the selectors are not selecting the right elements.

The attached stylesheet has this: -ms-[title~="flower"] That will not work because of the "-ms-" part. The selector [class|="top"] in your stylesheet will work for any element that has a class attribute starting with "top"

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...