Color A Pixel In The Div

I don't know if it is tricky. Here is a jsFiddle simple

hello

: Is there any easy way to color the top left pixel of that div in red? Thank you.

Solution 1:

You can do this :

div:before{
    position: absolute;
    width:1px;height:1px;
    background:red;
    content:'';
}
div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

Demonstration (with a bigger red dot, so that it's obvious)

Solution 2:

For browser compatibility you could add a span inside your div:

<div><span></span>hello</div>

Then add styling:

div {
    border:1px solid green;
    height:200px;
    background-color:yellow;
    position:relative;
}

div span {
    position:absolute;
    height:1px;
    width:1px;
    background:red;
    top:0;
    left:0;
}

Solution 3:

By this way :

div {
    position: relative;
    border:1px solid green;
    height:200px;
    background-color:yellow;
}

div span {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    background: red;
}

http://jsfiddle.net/m3GMc/1/

Or via an image.

Solution 4:

You should be able to use:

first-pixel-color-top-left-color: #f00;