Use CSS attribute selectors:

https://developer.mozilla.org/en-US/docs/CSS/Attribute_selectors

e.g.:

    div[role=main]

The shortest way to write a selector that accesses that specific div is to simply use

    [role=main] {
      /* CSS goes here */
    }

The previous answers are not wrong, but they rely on you using either a div or using the specific id. With this selector, you&#39;ll be able to have all kinds of crazy markup and it would still work and you avoid problems with specificity.

&lt;!-- begin snippet: js hide: false console: true --&gt;

&lt;!-- language: lang-css --&gt;

    [role=main] {
      background: rgba(48, 96, 144, 0.2);
    }
    div,
    span {
      padding: 5px;
      margin: 5px;
      display: inline-block;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;content&quot; role=&quot;main&quot;&gt;
      &lt;span role=&quot;main&quot;&gt;Hello&lt;/span&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Accessing it like this should work: `#content[role=&quot;main&quot;]`

Sure you can do in this mode:

   
&lt;!-- language: lang-css --&gt;

     #content[role=&quot;main&quot;]{
           //style
        }

[http://www.w3.org/TR/selectors/#attribute-selectors][1]


  [1]: http://www.w3.org/TR/selectors/#attribute-selectors

we can use

   

     element[role=&quot;ourRole&quot;] {
        requried style !important; /*for overriding the old css styles */
        }

follow this thread for more information 

https://stackoverflow.com/questions/6416369/css-attribute-selector-apply-class-if-custom-attribute-has-value-also-will-it

and learn css attribute selector

http://www.w3schools.com/css/css_attribute_selectors.asp

please use : 

     #content[role=main]{
       your style here
    }

I understand the principle of coroutines. I know how to get the standard `StartCoroutine` / `yield return` pattern to work in C# in Unity, e.g. invoke a method  returning `IEnumerator` via `StartCoroutine` and in that method do something, do `yield return new WaitForSeconds(1);` to wait a second, then do something else.

My question is: what&#39;s really going on behind the scenes? What does `StartCoroutine` really do? What `IEnumerator` is `WaitForSeconds` returning? How does `StartCoroutine` return control to the &quot;something else&quot; part of the called method? How does all this interact with Unity&#39;s concurrency model (where lots of things are going on at the same time without use of coroutines)?

How does StartCoroutine / yield return pattern really work in Unity?

Below is the method I wrote: 

    public List&lt;Map&lt;String, Object&gt;&gt; loadNotYetInEmployee(int shift, Date date,
            int transitionVal, String type, User user) {

        DateTime datetime = new DateTime(date);
        datetime = datetime
                .plus(Period.minutes(shiftTiming.getSession1InTime()));

        List&lt;Map&lt;String, Object&gt;&gt; result = new ArrayList&lt;Map&lt;String, Object&gt;&gt;();

        sql = SqlMapUtils.getSql(&quot;attendance.attendancestatus.latein&quot;,
                parameters);
        result = getJdbcTemplate().queryForList(sql);
        for (int i = 0; i &lt; result.size(); i++) {
            Date punchInTime = (Date) result.get(i).get(&quot;punchtime&quot;);
            DateTime punchTime = new DateTime(punchInTime);
        }
        return result;
    }


Now from my method you can see I have a [Joda-Time][1] [DateTime][2] object in object named `datetime` and from my result I am getting one timestamp which I am converting to jodatime `punchTime`. Now I want to find out the diff between these two dates, how do I do that?



  [1]: http://www.joda.org/joda-time/
  [2]: http://www.joda.org/joda-time/apidocs/org/joda/time/DateTime.html

How to find difference between two Joda-Time DateTimes in minutes

In the following HTML

    &lt;div id=&quot;content&quot; role=&quot;main&quot;&gt;

the id can be accessed through `#content` in CSS. How do I access `role=&quot;main&quot;`.



How to style CSS role

In the following HTML
<pre><code class="hljs language-ini">&#x3C;div id="content" role="main">
</code></pre>
the id can be accessed through <code>#content</code> in CSS. How do I access <code>role="main"</code>.

Does anyone know of a way to make an image not draggable and not selectable -- at the same time -- in Firefox, without resorting to Javascript? Seems trivial, but here&#39;s the issue:

1) Can be dragged and highlighted in Firefox:

    &lt;img src=&quot;...&quot;&gt;

2) So we add this, but image can still be highlighted while dragging:

    &lt;img src=&quot;...&quot; draggable=&quot;false&quot;&gt;

3) So we add this, to fix the highlighting issue, but then counterintuitively, **the image become draggable again.** Weird, I know! Using FF 16.0.1

    &lt;img src=&quot;...&quot; draggable=&quot;false&quot; style=&quot;-moz-user-select: none;&quot;&gt;


So, does anyone know why adding `-moz-user-select: none`, would somehow trump and disable `draggable=false`? Of course, webkit works as expected. Nothing is out there on the Interwebs about this...It would be great if we could shine some light on this together. 


**Edit:** *This is about keeping UI elements from being inadvertently dragged and improving usability - not some lame attempt at a copy protection scheme.*

Preventing an image from being draggable or selectable without using JS

I cannot get `z-index` working on a `iframe` that contains a pdf file with IE8. It works with Google Chrome.

Example ([JSFiddle](http://jsfiddle.net/5J6zL/9/)):

**HTML**

    &lt;div id=&quot;div-text&quot;&gt;
          &lt;div id=&quot;shouldBeOnTop&quot;&gt;my text that should be on top&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;div-frame&quot;&gt;
        &lt;iframe src=&quot;http://legallo1.free.fr/french/CV_JLG.pdf&quot; width=&quot;200&quot; height=&quot;200&quot;/&gt;
    &lt;/div&gt;

**CSS**

&lt;!-- language: lang-css --&gt;

    #div-text{
        position:relative;
        left:210px;
        top:20px
    }
    
    #shouldBeOnTop{
        position:relative;
        right:60px;
        background-color:red;
        width:100px;
        z-index:2;
    }
    
    #div-frame{
        position:relative;
         z-index:1;
    }

z-index does not work in Internet Explorer with pdf in iframe

I am using an img tag of HTML to show a photo in our application. I have set both its height and width attribute to 64. I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes of an img tag to 64, it&#39;s not maintaining the aspect ratio, so the image looks distorted.

For your reference my exact code is:

    &lt;img src=&quot;Runtime Path to photo&quot; border=&quot;1&quot; height=&quot;64&quot; width=&quot;64&quot;&gt;

How to maintain aspect ratio using HTML IMG tag

I&#39;ve been using Twitter&#39;s bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.

The below link is what I have now.  I would like all text to be aligned with the bottom most bar.

Screenshot:

![progress bar](http://i.imgur.com/gaE4U.png)

I&#39;ve tried my best with pure CSS and I&#39;m trying to avoid using JS if possible but I&#39;m willing to accept it if it&#39;s the cleanest way to do it.

    &lt;div class=&quot;progress&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 86%&quot;&gt;517/600&lt;/div&gt;
    &lt;/div&gt;


Twitter Bootstrap: Center Text on Progress Bar

Is there any mechanism to display a child element when its parent element is display: none?

The situation is a validation error on a hidden tab. I want to surface the error message, even though the field is hidden.

A really simplified JSFiddle of the situation is here http://jsfiddle.net/vLYnk/

Markup:

    &lt;ul&gt;
        &lt;li&gt;One&lt;/li&gt;
        &lt;li class=&quot;hide&quot;&gt;
            Two
            &lt;ul&gt;
                &lt;li class=&quot;reshow&quot;&gt;Re Show Me&lt;/li&gt;
                &lt;li&gt;Inner 2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;Three&lt;/li&gt;
    &lt;/ul&gt;

CSS:

    .hide {display: none}
    .reshow {display: block !important; position: fixed; top: 0; left: 0;}

I&#39;m guessing this is impossible as the child would have no context, but just in case???

Content Type	Original Author	Original Content on Stackoverflow
Question	laggingreflex	View Question on Stackoverflow
Solution 1 - Css	sync	View Answer on Stackoverflow
Solution 2 - Css	Patrick	View Answer on Stackoverflow
Solution 3 - Css	pdu	View Answer on Stackoverflow
Solution 4 - Css	Alessandro Minoccheri	View Answer on Stackoverflow
Solution 5 - Css	shrawan	View Answer on Stackoverflow
Solution 6 - Css	Chandra Sekhar Walajapet	View Answer on Stackoverflow
Solution 7 - Css	Saeed	View Answer on Stackoverflow

How to style CSS role

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

Solution 4 - Css

Solution 5 - Css

Solution 6 - Css

Solution 7 - Css

How to find difference between two Joda-Time DateTimes in minutes

How does StartCoroutine / yield return pattern really work in Unity?

Attributions