You use both (*without space between them*)

&lt;!-- language: lang-css --&gt;

    .checked.featured{
       // ...
    }

Reference: http://www.w3.org/TR/selectors/#class-html


----------

Example

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    div{margin:1em;padding:1em;}

    .checked{color:green;}
    .featured{border:1px solid #ddd;}

    .checked.featured{
           font-weight:bold;
        }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;checked&quot;&gt;element with checked class&lt;/div&gt;
    &lt;div class=&quot;featured&quot;&gt;element with featured class&lt;/div&gt;
    &lt;div class=&quot;featured checked&quot;&gt;element with both checked and featured classes&lt;/div&gt;

&lt;!-- end snippet --&gt;



You can just &quot;join&quot; two classes like that: `.checked.featured`

To express AND you simply concatenate your classes `.checked.featured` which may not be confused with the popular `.checked .featured` which is the descendant selector.

Have a look at the official [Documentation](http://www.w3.org/TR/CSS2/selector.html#class-html)



I have a vector with 49 numeric values. I want to have a 7x7 numeric matrix instead. 

Is there some sort of convenient automatic conversion statement I can use, or do I have to do 7 separate column assignments of the correct vector subsets to a new matrix? I hope that there is something like the oposite of `c(myMatrix)`, with the option of giving the number of rows and/or columns I want to have, of course. 

How to turn a vector into a matrix in R?

I have a NodeJS application with Mongoose ODM(**Mongoose 3.3.1**). I want to retrieve all fields except 1 from my collection.For Example: I have a collection Product Which have 6 fields,I want to select all except a field &quot;Image&quot; . I used &quot;**exclude**&quot; method, but got error..
This was my code.

        var Query = models.Product.find();
        Query.exclude(&#39;title Image&#39;);

        if (req.params.id) {
            Query.where(&#39;_id&#39;, req.params.id);
        }


        Query.exec(function (err, product) {
            if (!err) {
                return res.send({ &#39;statusCode&#39;: 200, &#39;statusText&#39;: &#39;OK&#39;, &#39;data&#39;: product });
            } else {
                return res.send(500);
            }
        });
But this returns **error**

    Express
    500 TypeError: Object #&lt;Query&gt; has no method &#39;exclude&#39;.........
Also I tried, `var Query = models.Product.find().exclude(&#39;title&#39;,&#39;Image&#39;);` and `var Query = models.Product.find({}).exclude(&#39;title&#39;,&#39;Image&#39;);`  But getting the same error. How to exclude one/(two) particular fields from a collection in Mongoose.

How to exclude one particular field from a collection in Mongoose?

I&#39;m trying to select all of the elements that have both `.checked` and `.featured` tags. So basically, what I&#39;m looking for is an &quot;and&quot; selector; I don&#39;t know if there is one or not.

Is there any workaround for cases like this?

CSS &quot;and&quot; selector - Can I select elements that have multiple classes?

<p>I'm trying to select all of the elements that have both <code>.checked</code> and <code>.featured</code> tags. So basically, what I'm looking for is an "and" selector; I don't know if there is one or not.</p>
<p>Is there any workaround for cases like this?</p>


    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=9; IE=8; IE=7; IE=EDGE&quot; /&gt;

1. Actually what is the meaning of this statement ?

2. Some of the examples use `,` to separate versions of IE, while some use `;`; which is correct?

3. The order `IE=9; IE=8; IE=7; IE=EDGE` has some importance, I wish to know that.

**Edit**: I am using `&lt;!DOCTYPE html&gt;`


&quot;X-UA-Compatible&quot; content=&quot;IE=9; IE=8; IE=7; IE=EDGE&quot;

I was under the impression you could type into a combo box besides selecting any values already in the list. However, I can&#39;t seem to find info on how to do this. Is there a property I need to add to it to allow typing of text?

HTML combo box with option to type an entry

I want to have a place holder, e.g. `&lt;No result&gt;` when filter result returns empty. Could anyone please help? I don&#39;t even know where to start...

**HTML**:

    &lt;div ng-controller=&quot;Ctrl&quot;&gt;
    &lt;h1&gt;My Foo&lt;/h1&gt;
    &lt;ul&gt;
        &lt;li ng-repeat=&quot;foo in foos&quot;&gt;
            &lt;a href=&quot;#&quot; ng-click=&quot;setBarFilter(foo.name)&quot;&gt;{{foo.name}}&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;br /&gt;
    &lt;h1&gt;My Bar&lt;/h1&gt;
    &lt;ul&gt;
        &lt;li ng-repeat=&quot;bar in bars | filter:barFilter&quot;&gt;{{bar.name}}&lt;/li&gt;
    &lt;/ul&gt;

    &lt;/div&gt;

**JS**:

    function Ctrl($scope) {
    
      $scope.foos = [{
        name: &#39;Foo 1&#39;
      },{
        name: &#39;Foo 2&#39;
      },{
        name: &#39;Foo 3&#39;
      }];
    
      $scope.bars = [{
        name: &#39;Bar 1&#39;,
        foo: &#39;Foo 1&#39;
      },{
        name: &#39;Bar 2&#39;,
        foo: &#39;Foo 2&#39;
      }];
    
      $scope.setBarFilter = function(foo_name) {
        $scope.barFilter = {};
        $scope.barFilter.foo = foo_name;
      }
    }

**jsFiddle**: http://jsfiddle.net/adrn/PEumV/1/

Thanks!            

AngularJS - placeholder for empty result from filter

I just saw this meta tag in the wild and was wondering it does and why it&#39;s used?

    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot; /&gt;

Reading the [documentation][1] on About.com, it says:

&gt;&quot;IE=edge&quot; tells Internet Explorer to use the highest mode available to that version of IE. Internet Explorer 8 can support up to IE8 modes, IE9 can support IE9 modes and so on.

But what about the `chrome=1` tag?


  [1]: http://webdesign.about.com/od/metataglibraries/p/x-ua-compatible-meta-tag.htm

What is X-UA-Compatible when it references IE=edge,chrome=1?

I have a html page where I am appending html at dynamically through a javascript like below

    &lt;script type=&quot;text/javascript&quot; src=&quot;/myapp/htmlCode&quot;&gt;&lt;/script&gt;

I want to call a js function e.g. loadedContent(); once the above script adds dynamic html.

Can someone help me how I can do that?

Call javascript function after script is loaded

I have a header box including border and padding and background color for that box,
can I change the background color only for the padded region after the border and then the same background color for the rest of the width (i.e. grey in the given code)?

Just a pinch of the code where I want the padded background color:

    nav {
        margin:0px auto;
        width:100%;
        height:50px;
        background-color:grey;
        float:left;
        padding:10px;
        border:2px solid red;
    }

Can I add background color only for padding?

I&#39;m working with a CMS which I only have access to the CSS file. So, I can&#39;t include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from within the CSS file?



How to import Google Web Font in CSS file?

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a `transform: scale()`. Specifically I&#39;m doing this:

   


&lt;!-- language: lang-css --&gt;

    @-webkit-keyframes bounceIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(.3);
      }

      50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
      }

      70% {
        -webkit-transform: scale(.9);
      }

      100% {
        -webkit-transform: scale(1);
      }
    }


If you visit http://rourkery.com in Chrome, you should see the problem on the main text area. It didn&#39;t used to do this and it doesn&#39;t seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can&#39;t find anything about 2d transforms like this.

Any ideas would be appreciated, thanks!

Blurry text after using CSS transform: scale(); in Chrome

### The Setup

So, I have a contenteditable div -- I&#39;m making a WYSIWYG editor: bold, italics, formatting, whatever, and most lately: inserting fancy images (in a fancy box, with a caption).

    &lt;a class=&quot;fancy&quot; href=&quot;i.jpg&quot; target=&quot;_blank&quot;&gt;
        &lt;img alt=&quot;&quot; src=&quot;i.jpg&quot; /&gt;
        Optional Caption goes Here!
    &lt;/a&gt;

The user adds these fancy images with a dialog I present them with: they fill out the details, upload the image, and then much like the other editor functions, I use `document.execCommand(&#39;insertHTML&#39;,false,fancy_image_html);` to plop it in at the user&#39;s selection.

### Desired Functionality

So, now that my user can plop in a fancy image -- they need to be able to move it around.
The user needs to be able to click and drag the image (fancy box and all) to place it anywhere that they please within the contenteditable. They need to be able to move it between paragraphs, or even within paragraphs -- between two words if they want.

### What gives me hope

Keep in mind -- in a contenteditable, plain old **`&lt;img&gt;`** tags are already blessed by the user-agent with this lovely drag-and-drop capability. By default, you can drag and drop **`&lt;img&gt;`** tags around wherever you please; the default drag-and-drop operation behaves as one would dream.

So, considering how this default behavior already works so smashingly on our `&lt;img&gt;` buddies -- and I only want to extend this behaviour a little bit to include a tad more HTML -- this seems like something that should be easily possible.

## My Efforts Thus Far ##
First, I set up my fancy `&lt;a&gt;` tag with the draggable attribute, and disabled contenteditable (not sure if that&#39;s necessary, but it seems like it may as well be off):

    &lt;a class=&quot;fancy&quot; [...] draggable=&quot;true&quot; contenteditable=&quot;false&quot;&gt;

Then, because the user could still drag the image out of the fancy `&lt;a&gt;` box, I had to do some CSS. I&#39;m working in Chrome, so I&#39;m only showing you the -webkit- prefixes, though I used the others too.

    .fancy {
        -webkit-user-select:none;
        -webkit-user-drag:element; }
        .fancy&gt;img {
            -webkit-user-drag:none; }


Now the user can drag the whole fancy box, and the little partially-faded click-drag representation image reflects this -- I can see that I&#39;m picking up the entire box now :)

I&#39;ve tried several combinations of different CSS properties, the above combo seems to make sense to me, and seems to work best.

I was hoping that this CSS alone would be enough for the browser to use the entire element as the draggable item, automagically granting the user the functionality I&#39;ve been dreaming of... *It does however, appear to be more complicated than that.*

### HTML5&#39;s JavaScript Drag and Drop API
This Drag and Drop stuff *seems* more complicated than it needs to be.

So, I started getting deep into DnD api docs, and now I&#39;m stuck. So, here&#39;s what I&#39;ve rigged up (yes, jQuery):

	$(&#39;.fancy&#39;)
		.bind(&#39;dragstart&#39;,function(event){
			//console.log(&#39;dragstart&#39;);
			var dt=event.originalEvent.dataTransfer;
			dt.effectAllowed = &#39;all&#39;;
			dt.setData(&#39;text/html&#39;,event.target.outerHTML);
		});
	
	$(&#39;.myContentEditable&#39;)
		.bind(&#39;dragenter&#39;,function(event){
			//console.log(&#39;dragenter&#39;);
			event.preventDefault();
		})
		.bind(&#39;dragleave&#39;,function(event){
			//console.log(&#39;dragleave&#39;);
		})
		.bind(&#39;dragover&#39;,function(event){
			//console.log(&#39;dragover&#39;);
			event.preventDefault();
		})
		.bind(&#39;drop&#39;,function(event){
			//console.log(&#39;drop&#39;);		
			var dt = event.originalEvent.dataTransfer;
			var content = dt.getData(&#39;text/html&#39;);
			document.execCommand(&#39;insertHTML&#39;,false,content);
			event.preventDefault();
		})
		.bind(&#39;dragend&#39;,function(event){ 
			//console.log(&#39;dragend&#39;);
		});


**So here&#39;s where I&#39;m stuck:** This almost completely works. *Almost completely.* I have everything working, up until the very end. In the drop event, I now have access to the fancy box&#39;s HTML content that I&#39;m trying to have inserted at the drop location. All I need to do now, is insert it at the correct location!

The problem is **I can&#39;t find the correct drop location, or any way to insert to it.** I&#39;ve been hoping to find some kind of *&#39;dropLocation&#39;* object to dump my fancy box into, something like **`dropEvent.dropLocation.content=myFancyBoxHTML;`**, or perhaps, at least, some kind of drop location values with which to find my own way to put the content there?
*Am I given anything?*

*Am I doing it completely wrong? Am I completely missing something?*

I tried to use **`document.execCommand(&#39;insertHTML&#39;,false,content);`** like I expected I should be able to, but it unfortunately fails me here, as the selection caret is not located at the precise drop location as I&#39;d hope.

I discovered that if I comment out all of the **`event.preventDefault();`**&#39;s, the selection caret becomes visible, and as one would hope, when the user prepares to drop, hovering their drag over the contenteditable, the little selection caret can be seen running along between characters following the user&#39;s cursor and drop operation -- indicating to the user that the selection caret represents the precise drop location. **I need the location of this selection caret.**

With some experiments, I tried execCommand-insertHTML&#39;ing during the drop event, and the dragend event -- neither insert the HTML where the dropping-selection-caret was, instead it uses whatever location was selected prior to the drag operation.

*Because the selection caret is visible during dragover, I hatched a plan.*

For awhile, I was trying, in the dragover event, to insert a temporary marker, like `&lt;span class=&quot;selection-marker&quot;&gt;|&lt;/span&gt;`, just after `$(&#39;.selection-marker&#39;).remove();`, in an attempt for the browser to constantly (during dragover) be deleting all selection markers and then adding one at the insertion point -- essentially leaving one marker wherever that insertion point is, at any moment. The plan of course, was to then replace this temporary marker with the dragged content which I have.

None of this worked, of course: I couldn&#39;t get the selection-marker to insert at the apparently visible selection caret as planned -- again, the execCommand-insertedHTML placed itself wherever the selection caret was, prior to the drag operation.

## Huff. So what have I missed? How is it done? ##
**How do I obtain, or insert into, the precise location of a drag-and-drop operation?**
*I feel like this is, obviously, a common operation among drag-and-drops -- surely I must have overlooked an important and blatant detail of some kind?* Did I even have to get deep into JavaScript, or maybe there&#39;s a way to do this just with attributes like draggable, droppable, contenteditable, and some fancydancy CSS3?

I&#39;m still on the hunt -- still tinkering around -- I&#39;ll post back as soon as I find out what I&#39;ve been failing at :)

----------

## The Hunt Continues (edits after original post)

----------

Farrukh posted a good suggestion -- use:

    console.log( window.getSelection().getRangeAt(0) );

To see where the selection caret actually is. I plopped this into the **dragover** event, which is when I figure the selection caret is visibily hopping around between my editable content in the contenteditable.

**Alas, the Range object that is returned, reports offset indices that belong to the selection caret prior to the drag-and-drop operation.**

It was a valiant effort. Thanks Farrukh.

**So what&#39;s going on here?** I am getting the sensation that the little selection caret I see hopping around, isn&#39;t the selection caret at all! I think it&#39;s an imposter!

### Upon Further Inspection!

Turns out, it is an imposter! The **real** selection caret remains in place during the entire drag operation! You can see the little bugger!

I was reading [MDN Drag and Drop Docs][1], and found this:

&gt; Naturally, you may need to move the insertion marker around a dragover event as well. **You can use the event&#39;s clientX and clientY properties as with other mouse events to determine the location of the mouse pointer.**

Yikes, does this mean I&#39;m supposed to figure it out for myself, based on **clientX** and **clientY**?? Using mouse coordinates to determine the location of the selection caret myself? Scary!!

I&#39;ll look into doing so tomorrow -- unless myself, or somebody else here reading this, can find a sane solution :)

  [1]: https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

Precise Drag and Drop within a contenteditable

I&#39;m having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (`margin:0 auto;`). The bug is still there if you remove the transition as well.

You can see it happening here:  

http://jsfiddle.net/MfUMd/1/

HTML:

    &lt;div class=&quot;wrap&quot;&gt;
        &lt;img src=&quot;https://github.com/favicon.ico&quot; class=&quot;target&quot; alt=&quot;img&quot;/&gt;
    &lt;/div&gt;
    
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;div class=&quot;block&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS:

    .wrap {
        margin:50px auto;
        width: 100px;
    }
    .block {
        width:30px;
        height:30px;
        background:black;
    }
    .target,.block {
        display:block;
        -webkit-transition: all 0.4s ease;
    	-moz-transition: all 0.4s ease;
    	-o-transition: all 0.4s ease;
    	transition: all 0.4s ease;
    }
    .target:hover,.block:hover {
    	-webkit-transform: rotate(90deg); 
        -moz-transform: rotate(90deg); 
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);  
    }

Comment out the `margin:0 auto;` line to make it go away.

Anyone have any ideas of how to stop this while keeping the page centered?

I&#39;m using Version 24.0.1312.57 on OSX 10.6.8

Cheers

Content Type	Original Author	Original Content on Stackoverflow
Question	Mia	View Question on Stackoverflow
Solution 1 - Html	Gabriele Petrioli	View Answer on Stackoverflow
Solution 2 - Html	Moseleyi	View Answer on Stackoverflow
Solution 3 - Html	Christoph	View Answer on Stackoverflow

CSS "and" selector - Can I select elements that have multiple classes?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

How to exclude one particular field from a collection in Mongoose?

How to turn a vector into a matrix in R?

Attributions