Напоминалка о селекторах в CSS #
*
Применить ко всем элементам.
* {
margin: 0;
padding: 0;
}
margin: 0;
padding: 0;
}
Допускается наследование
#container * {
border: 1px solid black;
}
border: 1px solid black;
}
Поддерживает этот селектор IE6+ Firefox Chrome Safari Opera
X + Y
ul + p {
color: red;
}
color: red;
}
Только первый абзац после каждого ul будет иметь красный текст
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X > Y
div#container > ul {
border: 1px solid black;
}
border: 1px solid black;
}
Будет рисоваться бордер только для ul внутри контейнера с id container
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X ~ Y
ul ~ p {
color: red;
}
color: red;
}
Тоже самое что и X + Y, только красным будут все абзацы
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X[title]
a[title] {
color: green;
}
color: green;
}
Ссылка что имеет внутри себя title, будет зеленым
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X[href="foo"]
a[href="http://veselov.sumy.ua"] {
color:green;
}
color:green;
}
Грубое объявление ссылки которая будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X[href*="ves"]
a[href*="ves"] {
color: #1f6053;
}
color: #1f6053;
}
Объявление ссылки содержащая в себе "ves", будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X[href^="http"]
a[href^="http"] {
color:green;
}
color:green;
}
Ссылки которые начинаються с http сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X[href$=".jpg"]
a[href$=".jpg"] {
color: red;
}
color: red;
}
Ссылки что заканчиваются на расширение .jpg сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera
X:checked
input[type=radio]:checked {
border: 1px solid black;
}
border: 1px solid black;
}
Для всех input type radio при выборе рисовать бордер. демо (в примере поменять цвет на синий)
Поддерживает этот селектор IE9+ Firefox Chrome Safari Opera
X
pseudoElement
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
font-weight: bold;
font-size: 1.2em;
}
Первая линия абзаца
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
Первая буква абзаца
Поддерживает этот селектор IE6+ Firefox Chrome Safari Opera
X:nth-child(n)
li:nth-child(3) {
color: red;
}
color: red;
}
Красным третий li
Поддерживает этот селектор IE9+ Firefox 3.5+ Chrome Safari
X:nth-last-child(n) - тоже самое что и предыдущий только отсчет с конца
Их конечно больше. Но и эти как по мне редко используются. А сейчас бонус:
a {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
При наведении на ссылку сделает ее на 10% больше
div {
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property - IE7 and below */
_background-color: #000; /* add a _ before the property - IE6 and below */
}
background-color: #999; /* all browsers */
*background-color: #ccc; /* add a * before the property - IE7 and below */
_background-color: #000; /* add a _ before the property - IE6 and below */
}
Верстаем под разные версии ИЕ -)
div {
/* standards-compliant browsers */
opacity:0.7;
/* The following is ignored by standards-based browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
/* standards-compliant browsers */
opacity:0.7;
/* The following is ignored by standards-based browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}
Выставляем прозрачность с учетом версий ИЕ
a { white-space: nowrap; }
Не рвать ссылку на строки