We Keep Coding

how to call directly z-index in class in html?

Ask a question is it applicable to do these in the element:
<div class="z-index-2"> <div>
if its right or wrong?
Blockquote

class X applies bunch of styles in css written for .X selector. so it is just a name. if you have no "z-index-2" specific class then it won't work. you can modify inline styles instead
<div style="z-index: 2;"> </div>

How can I have nested grid-lists in angular material?

When I try to nest grids in angular, the internal grid disappear.
Here is an example :
https://stackblitz.com/edit/angular-eib7wz
I tried playing around with the column property but I still get a similar result, the nested grid does not show up at all.
I am using the grid list to separate my page into small sections and in each section I want to place a different component and one of these components is another smaller grid.
I am open to suggestions. Thank you for the help.

The grid does show up when nested, only the size the zero... so we add a div and style it... i deliberately put min-width:80%... to achieve your objective, you might want to put min-width:100%:
add the following relevant CSS:
.internalMatGrid{ border:1px solid red; min-width:80%;}
relevant HTML:
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>
<div class='internalMatGrid' >
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile>1</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
</div>
</mat-grid-tile>
<mat-grid-tile>2</mat-grid-tile>
<mat-grid-tile>3</mat-grid-tile>
<mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>
you can check a working stackblitz here

In some instances with nested Material components, such as mat-grid-list, you need to use both /deep/ and !important.
For instance, with this HTML code:
<mat-grid-list *ngFor="let diet of diets"
cols="8"
rowHeight="210px"
gutterSize="1px">
<mat-grid-tile class="diet-name">
{{ diet.name }}
</mat-grid-tile>
<mat-grid-tile *ngFor="let day of diet.days"
class="outer-tile">
...
</mat-grid-tile>
</mat-grid-list>
If you want to add a style around the text, which ends up wrapped in a <figure> tag, you'll need to go with something like this in your CSS:
/deep/ .mat-grid-tile.diet-name figure.mat-figure {
margin: 0 5px !important;
}

Automatic margins when using css

If i used CSS my div automatically margins left and right if i use inline style its works perfect,i don't understand whats going when i use CSS
i'm using React.js
I'm trying to style with CSS,its gives auto margin to left and right
<div className="container">
<h1>hello</h1>
</div>
//CSS code
.container
background-color: lightblue;
}
//i'm using inline style its works perfect
``
<div style={{backgroundColor: 'blue'}}>
<h1>hello</h1>
</div>
``

I guess you have included bootstrap in your project and container is a bootstrap class, so it adds style from bootstrap library as well
Try using any other class name it will just work fine.

Please note, container is a bootstrap class, so it adds style from bootstrap library as and try using any other classes name it will be worked excellent.

Styling content inserted in the Shadow DOM

I have this example:
http://codepen.io/dbugger/pen/IuDxw
Where I have an insertion point inside the Shadow DOM and I try to apply an style to it, making it disappear. But the image is still visible. I suspect there is some principle I haven't undestood propely from the Web Components.
Can someone explain me what am I doing wrong?

The trick is that the image is not, as kkemple mentioned, part of the Shadow DOM, but rather the Light DOM, which means it's not directly accessible from inside the component. It's user provided content, like the parameters passed into a class constructor in an OOP language. If at all possible, then, the user should provide their own styles to go with it.
That being said, there are definitely valid use cases where the component author wants to style user-provided content. Hiding certain parts of the user-provided markup based on attributes on the host, events (clicks), etc. is definitely one of those. In that case, wrap the <content> element in a Shadow DOM element and hide that:
<template>
<style>
.image {
display: none;
}
</style>
<div class="image">
<content></content>
</div>
</template>
http://codepen.io/anon/pen/rCGqD
On a side note: It is technically possible to apply styles directly to Light DOM elements, but be aware that in many cases this is considered leaking implementation details to the outside world. If the first solution works, use that instead.

It is not working is because your code is not in the shadow DOM, the div and image is still accessible through default styling. I forked your codepen and added the styling so you could see.
var host = document.querySelector(".host");
var template = document.getElementById( 'template' );
var root = host.webkitCreateShadowRoot();
root.appendChild( template.content );
<template id="template">
<style>
.wrapper {
display: none;
}
</style>
<div class="wrapper">
<content selector=".img"></content>
</div>
<h2>In the Shadows</h2>
</template>
<style>
img {
border: 1px solid black;
}
</style>
<div class="host">
<img class="img" src="http://placehold.it/200x275&text=1" alt="" />
</div>
http://codepen.io/kkemple/pen/euBKs
I didn't go in to why it was not creating a shadow DOM element as your JS looked correct to me but here is a great article on shadow DOM web-ponents:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

Javascript output won't accept any CSS styling

I'm using simplecart.js which generates data for me to add to a cart, and then passes it to PayPal for me.
I have successfully added the 'add to basket' and 'checkout' features but am finding styling the JS-generated code impossible as no styles applied to it will work.
This is the code site has given to me, which generates a number of items such as name, quantity etc from stored data. It outputs all information correctly but any styles applied to the class names do nothing.
This is the code that generates the data:
<div class="simpleCart_items"></div>
This is the result from the web browser:
<div class="simpleCart_items"><div>
<div class="headerRow">
<div class="item-name">Name</div>
<div class="item-price">Price</div>
<div class="item-quantity">Qty</div>
<div class="item-remove"></div>
</div>
<div class="itemRow row-0 odd" id="cartItem_SCI-3">
<div class="item-name">The Jenny Snood £11</div>
<div class="item-price">£11.00</div>
<div class="item-quantity">1</div>
<div class="item-remove">
Remove
</div>
</div>
</div>
</div>
The browser is receiving all the data correctly, but applying any styles to the class names does nothing. For example, I have:
.headerRow{
background-colour:#0F0;
}
The result should be that the background of headerRow be lime, but nothing happens. It is not calling the style correctly.
I have tried everything but none of the classes will fetch the styles applied to them.
Here is a screenshot of how it looks, obviously not very nice unstyled, but I can't apply any styles at all to it.
Here is a link to the live site
A further examples:
I've added the code given which generates the totals:
<div class="simpleCart_total"></div>
I have tried giving it it's own new class and also styling the original, with !important - none of this works.
<div class="totals simpleCart_total"></div>
.simpleCart_total{
background-color:#0F0 !important;
}
.totals{
background-color:#0F0 !important;
}
None of the above seems to have any impact whatsoever.

There is some other css or inline javascript affecting the custom style your are attempting to use.
To mitigate this issue do one of the following:
Add !important after each css statement like so:
.headerRow{background-color:#0F0 !important;}
Reorder the css files so your custom css file is at the bottom

The problem here is that the styles are being applied dynamically by the js after your CSS (ie during the initialization of the plugin). You're only hope is to style it after this initialization with your own js, I think.
You can check this in Firebug... If you look at the elements there, you should see a bunch of inline styles being applied to them. These will trump your CSS in the header (and even the inline CSS you provide beforehand).
Edit: I saw some junky characters just before the directives in question (as well as those pointed out in another answer). I would try removing all the white space after the preceding directive and before the broken ones. It does not appear that the js is dynamically changing anything.