Напоминалка о селекторах в CSS

pseudoElement

p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}  

Первая линия абзаца

p::first-letter {  
   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;  
}

Красным третий 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);
}

При наведении на ссылку сделает ее на 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 */
}

Верстаем под разные версии ИЕ -)

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  */
}

Выставляем прозрачность с учетом версий ИЕ

a { white-space: nowrap; }

Не рвать ссылку на строки

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены *

Scroll Up