First-child и :last-child

Style.css:

p:first-child {

background:green;

}

p:last-child {

background:green;

}

Подсвечивает зеленым первый и последний элемент зеленым.

_____________________________________________________________________________________

БОНУС. РАЗЛИЧНЫЕ ПОЛЕЗНЫЕ ХРЕНЮШКИ =)

Index.html:

<link rel="stylesheet" href="style.css" />

<div class="roundedCorners">This box should have rounded corners</div>

<div class="shadowBox">This box should have a black shadow</div>

<div class="shadowText">The text in this box should have a yellow shadow</div>

<div class="columns">The text in this box should automatically dive out into three columns. Mauris placerat nunc at enim pellentesque suscipit. Sed auctor dictum ipsum, ac mollis eros pulvinar sit amet. </div>

<div class="rotate">This box should be rotated 25 degrees clockwise.</div>

<div class="gradient">This box should have a background color that goes from blue to white (gradient).</div>

Style.css:

div {background-color: grey; border: #DDD; padding: 10px; margin:10px;}

.roundedCorners {

border-radius: 15px;

}

.shadowBox {

box-shadow: 8px 8px 6px -2px black;

}

.shadowText{

text-shadow: 3px 3px 3px yellow;

}

.columns {

column-count: 3;

}

.rotate {

transform: rotate(25deg);

}

.gradient {

background: -moz-linear-gradient(top, blue 0%, white 100%); /* FF3.6+ */

background: -webkit-linear-gradient(top, blue 0%, white 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, blue 0%, white 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, blue 0%, white 100%); /* IE10+ */

background: linear-gradient(top, blue 0%, white 100%); /* the standard way */

}

It is likely that your browser has partial support of some of the ones that appear broken--to get it to work you put your vendor-prefix in front of the property.

Firefox: -moz-
Chrome: -webkit-
Safari: -webkit-
Opera: -o-
Internet Explorer: -ms-

For example, if you're using Chrome, you can make the columns example work by changing it's property to this:

-webkit-column-count: 3;

Sometimes the vendors have non-standard syntax, as is the case with gradients, so we put that in there for you.

_____________________________________________________________________________________

Active

Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

_____________________________________________________________________________________

Приоритет выполнения:

Declarations with the highest specificity (or importance if you prefer) are used by the browser.

1. style="" score 1000
2. # id selectors = 100
3. .class selectors = 10
4. Most other selectors = 1

<style>

#content p {color: yellow;}

p {color: purple;}

p {color: green;}

</style>

<div id="content">

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</p>

</div>

Дата добавления: 2015-08-17