VESELOV.SUMY.UA

Замена стандартного селектора на jQuery и CSS3

---

DEMO / СКАЧАТЬ

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

---

*
Применить ко всем элементам.

* {  
 margin: 0;  
 padding: 0;  
} 

Допускается наследование

#container * {  
 border: 1px solid black;  
} 

Поддерживает этот селектор IE6+ Firefox Chrome Safari Opera


X + Y

ul + p {  
   color: red;  
} 

Только первый абзац после каждого ul будет иметь красный текст
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X > Y

div#container > ul {  
  border: 1px solid black;  
} 

Будет рисоваться бордер только для ul внутри контейнера с id container
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X ~ Y

ul ~ p {  
   color: red;  
}  

Тоже самое что и X + Y, только красным будут все абзацы
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X[title]

a[title] {  
   color: green;  
}  

Ссылка что имеет внутри себя title, будет зеленым
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X[href="foo"]

a[href="http://veselov.sumy.ua"] {  
  color:green;
}  

Грубое объявление ссылки которая будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X[href*="ves"]

a[href*="ves"] {  
  color: #1f6053; 
} 

Объявление ссылки содержащая в себе "ves", будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X[href^="http"]

a[href^="http"] {  
   color:green;
} 

Ссылки которые начинаються с http сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X[href$=".jpg"]

a[href$=".jpg"] {  
   color: red;  
}  

Ссылки что заканчиваются на расширение .jpg сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera


X:checked

input[type=radio]:checked {  
   border: 1px solid black;  
}

Для всех input type radio при выборе рисовать бордер. демо (в примере поменять цвет на синий)
Поддерживает этот селектор IE9+ Firefox Chrome Safari Opera


XpseudoElement

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; }

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

JQuery Narrative Select Plugin

---

Скрипт заменяет обычные селекторы на такие как в скрине, при нажатии на "ссылку" появляется всплывающее окошко с выбором опции.

Демо / Скачать