I’ve written more extensively on the subject here: [**Unquoted attribute values in HTML and CSS**](http://mathiasbynens.be/notes/unquoted-attribute-values).
  
I’ve also created a tool to help you answer your question: http://mothereff.in/unquoted-attributes

[![Unquoted attribute value validator](http://i.stack.imgur.com/qYFKR.png)](http://mothereff.in/unquoted-attributes#foo%7Cbar)

You can usually omit the quotes as long as the attribute value is alphanumeric (however, there are some exceptions — see the linked article for all the details). Anyhow, I find it to be good practice to add the quotes anyway in case you need them, i.e. `a[href^=http://]` won’t work, but `a[href^=&quot;http://&quot;]` will.

The article I mentioned links to the appropriate chapters in the CSS spec.

&gt; Attribute values must be identifiers or strings

— http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

The first two use strings. The third uses an identifier. 

&gt; identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

— http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier

&gt; Strings can either be written with double quotes or with single quotes.

— http://www.w3.org/TR/CSS2/syndata.html#strings

I have a Silverlight 4 application. I have a C# DateTime object that I&#39;m binding to my UI. I want this DateTime to be in the format of `dd/mm/yyyy` time (TimeZone). For instance, today would be displayed as

    04/07/2011 at 01:13 p.m. (EST)

Is there a way to do this `XAML`? Or do I need to build a converter?

Format Date/Time in XAML in Silverlight

I have got a WPF datagrid and I want diffrent cell colours according to values. I have got below code on my xaml

    Style TargetType=&quot;DataGridCell&quot;

but instead of selecting a cell only is selecting all row? What am I missing?

Change DataGrid cell colour based on values

This question has been bugging me for a while now. When writing a CSS selector that compares against an element&#39;s attribute like so.

    a[rel=&quot;nofollow&quot;]

I never know what I should be doing with the quotation marks. Are they really necessary?

Basically, what is the specification for this because I can&#39;t find it on the web site.

Are all of these considered valid?

    a[rel=&quot;nofollow&quot;]
    a[rel=&#39;nofollow&#39;]
    a[rel=nofollow]

CSS attribute selectors: The rules on quotes (&quot;, &#39; or none?)

This question has been bugging me for a while now. When writing a CSS selector that compares against an element's attribute like so.
<pre><code class="hljs language-css">a[rel="nofollow"]
</code></pre>
I never know what I should be doing with the quotation marks. Are they really necessary?
Basically, what is the specification for this because I can't find it on the web site.
Are all of these considered valid?
<pre><code class="hljs language-css">a[rel="nofollow"]
a[rel='nofollow']
a[rel=nofollow]
</code></pre>

Is there a way to have a child DIV within a parent container DIV that is wider than its parent. The child DIV needs to be the same width as the browser viewport.

See example below:
![enter image description here][1]


The child DIV **must** stay as a child of the parent div. I know I can set arbitrary negative margins on the child div to make it wider but I can&#39;t work out how to essentially make it 100% width of the browser.

I know I can do this:

    .child-div{
        margin-left: -100px;
        margin-right: -100px;
    }

But I need the child to be the same width as the browser which is dynamic.

## Update ##

Thanks for your answers, it seems the closest answer so far is to make the child DIV `position: absolute`, and set the left and right properties to 0. 

The next problem I have is that the parent has `position: relative`, which means that left and right properties are still relative to the parent div and not the browser, see example here: [jsfiddle.net/v2Tja/2][2]


  [1]: http://i.stack.imgur.com/MRgm9.gif
  [2]: http://jsfiddle.net/v2Tja/2

I can&#39;t remove the `position: relative` from the parent without screwing everything else up.

Is there a way to make a child DIV&#39;s width wider than the parent DIV using CSS?

I have a page with divs like below

    &lt;div id=&quot;container&quot;&gt;
        &lt;div id=&quot;A&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;B&quot;&gt;
            &lt;div id=&quot;B1&quot;&gt;&lt;/div&gt;
            &lt;div id=&quot;B2&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id=&quot;C&quot;&gt;&lt;/div&gt;
        &lt;div id=&quot;D&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

with styling as;

    html, body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    #B, #C, #D {
        position: absolute;
    }
    #A{
        top: 0;
        width: 100%;
        height: 35px;
        background-color: #99CC00;
    }
    #B {
        top: 35px;
        width: 200px;
        bottom: 35px;
        background-color: #999999;
        z-index:100;
    }
    #B2 {
        margin-top: -35px;
        bottom: 0;
        background-color: #FFFFFF;
        width: 200px;
        overflow: scroll;
    }
    #B1 {
        height: 35px;
        width: 35px;
        margin-left: 200px;
        background-color: #CC0066;
    }
    #C {
        top: 35px;
        left: 200px;
        right: 0;
        bottom: 35px;
        background-color: #CCCCCC;
    }
    #D {
        bottom: 0;
        width: 100%;
        height: 35px;
        background-color: #3399FF;
    }

See the layout / screenshot below;

[![layout][1]][1]

I want to adjust the height of div `B2` to fill (or stretch to) entire div `B` (marked with a green border) and don&#39;t want to cross footer div D. Here is a working fiddle [**demo**][2](updated). How can I solve this??


  [1]: https://i.stack.imgur.com/jSrx1.png
  [2]: https://jsfiddle.net/blasteralfred/QWDxr/3683/

How to stretch div height to fill parent div - CSS

I&#39;m in the process of building a small intranet application and try, with no luck, to use **Adobe font** I purchased lately. As I was informed, in our case it&#39;s not a license violation.

**I converted the .ttf/.otf versions of font to .woff, .eot and .svg, so to target all major browsers.** The @font-face syntax I used is basically the bulletproof one from [Font Spring][1]:

    @font-face {
    	font-family: &#39;MyFontFamily&#39;;
        src: url(&#39;myfont-webfont.eot&#39;);
    	src: url(&#39;myfont-webfont.eot?#iehack&#39;) format(&#39;eot&#39;), 
    	     url(&#39;myfont-webfont.woff&#39;) format(&#39;woff&#39;), 
    	     url(&#39;myfont-webfont.ttf&#39;)  format(&#39;truetype&#39;),
    	     url(&#39;myfont-webfont.svg#svgFontName&#39;) format(&#39;svg&#39;);
    	}

I modified the HTTP headers (added Access-Control-Allow-Origin = &quot;*&quot;) to allow cross-domain references. **In FF and Chrome it works perfectly, but in IE9 I get:**

    CSS3111: @font-face encountered unknown error.  
    myfont-webfont.woff
    CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
    myfont-webfont.ttf

I noticed that when converting font from .ttf/.otf to .woff I also get an **.afm** file, but I don&#39;t have a clue whether it&#39;s important or not...

Any ideas how to work it out?

[Edit] - I host my websites (fonts too, but under separate directory and subdomain for static content) under **IIS 7.5**

  [1]: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

Make Adobe fonts work with CSS3 @font-face in IE9

I&#39;m trying to apply a `box-shadow` on all four sides. I could only get it on 2 sides:

![][1] 


  [1]: http://i.stack.imgur.com/X83rz.png

How to apply box-shadow on all four sides?

I&#39;ve noticed that some properties are inherited in CSS, and some are not. For example, the text-size property is inherited, but the padding and margin are not inherited by the child blocks. So how to figure out which properties are inherited, and which are not?

Which CSS properties are inherited?

I have a string `&quot;MySites&quot;`. I want to place a space between `My` and `Sites`. 

How can I do this in jQuery or JavaScript?

Insert space before capital letters

Pretty straight forward. In javascript, I need to check if a string contains any substrings held in an array.

How to check if a string contains text from an array of substrings in JavaScript?

How can I convert a `String` to an `int`?

```
&quot;1234&quot;  →  1234
```


How do I convert a String to an int in Java?

I want to display a Unicode character in Java.  If I do this, it works just fine:
		
`String symbol = &quot;\u2202&quot;;`

symbol is equal to &quot;∂&quot;.  That&#39;s what I want.

The problem is that I know the Unicode number and need to create the Unicode symbol from that.  I tried (to me) the obvious thing:

    int c = 2202;
    String symbol =  &quot;\\u&quot; + c;

However, in this case, symbol is equal to &quot;\u2202&quot;.  That&#39;s not what I want.

How can I construct the symbol if I know its Unicode number (but only at run-time---I can&#39;t hard-code it in like the first example)?


Creating Unicode character from its number

I was wondering how to capitalize a string found in an object in an `NSMutableArray`.

An `NSArray` contains the string `&#39;April&#39;` at index 2.  
I want this to be changed to `&#39;APRIL&#39;`.

Is there something simple like this?

    viewNoteDateMonth.text	= [[displayDate objectAtIndex:2] capitalized];

Capitalize or change case of an NSString in Objective-C

I have a `table` whose `td`s are created dynamically. I know how to get the first and last child but my question is:

Is there a way of getting the second or third child using CSS?

How can I get a specific number child using CSS?

I&#39;m trying to select `input` elements of all `type`s except `radio` and `checkbox`.

Many people have shown that you can put multiple arguments in `:not`, but using `type` doesn&#39;t seem to work anyway I try it.

&lt;!-- language: lang-css --&gt;

    form input:not([type=&quot;radio&quot;], [type=&quot;checkbox&quot;]) {
      /* css here */
    }

Any ideas?

Can the :not() pseudo-class have multiple arguments?

What I would like to do (not in IE obviously) is:

    p:not(.list):last-child + :text {
      margin-bottom: 10px;
    }

Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?

Is there a CSS selector for text nodes?

I want to create something like a recorder whichs tracks all actions of a user. For that, i need to identify elements the user interacts with, so that i can refer to these elements in a later session.

Spoken in pseudo-code, i want to be able to do something like the following

Sample HTML (could be of any complexity):

    &lt;html&gt;
    &lt;body&gt;
      &lt;div class=&quot;example&quot;&gt;
        &lt;p&gt;foo&lt;/p&gt;
        &lt;span&gt;&lt;a href=&quot;bar&quot;&gt;bar&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
      
User clicks on something, like the link. Now i need to identify the clicked element and save its location in the DOM tree for later usage:

    (any element).onclick(function() {
      uniqueSelector = $(this).getUniqueSelector();
    })

Now, uniqueSelector should be something like (i don&#39;t mind if it is xpath or css selector style):

    html &gt; body &gt; div.example &gt; span &gt; a

This would provide the possibility to save that selector string and use it at a later time, to replay the actions the user made.

How is that possible?

&lt;h1&gt;Update&lt;/h1&gt;
Got my answer: https://stackoverflow.com/questions/2068272/getting-a-jquery-selector-for-an-element

Get unique selector of element in Jquery

How can I write `:hover` and `:visited` condition for `a:before`?

I&#39;m trying `a:before:hover`, but it&#39;s not working.





Content Type	Original Author	Original Content on Stackoverflow
Question	Olical	View Question on Stackoverflow
Solution 1 - Css	Mathias Bynens	View Answer on Stackoverflow
Solution 2 - Css	Quentin	View Answer on Stackoverflow

CSS attribute selectors: The rules on quotes (", ' or none?)

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Change DataGrid cell colour based on values

Format Date/Time in XAML in Silverlight

Attributions