M

E

N

U

 

 

селекторы

базовые
* выбор всех элементов
element выбор определенного элемента
id выбор элемента с указанным идентификатором
.class выбор элемента с указанным классом
селектор, селектор выбор нескольких селекторов одновременно
уточнение выбор элемента с уточнением
иерархические
родитель потомок выбор всех элементов потомков
родитель>ребенок выбор всех элементов детей
селектор+элемент выбор одного следующего элемента
селектор~элемент выбор всех следующих элементов
фильтр контента
:has(элемент) выбор элемента, который имеет потомков, указанных в скобках
:parent выбор элемента, который является не пустым
:empty выбор элемента, который является пустым
:contains(text) выбор элемента, содержащего указанный текст, даже если текст содержится в дочернем элементе
базовые фильтры
:animated выбор элемента, который в данных момент участвует в анимации
:even выбор четных элементов, индексация начинается с 0
:odd выбор нечетных элементов, индексация начинается с 0
:first выбор первого дочернего элемента
:last выбор последнего дочернего элемента
:gt(index) выбор всех элементов, которые следуют после указанного индекса, индексация начинается с 0
:lt(index) выбор всех элементов, которые следуют до указанного индекса, индексация начинается с 0
:eq(index) выбор элемента по указанному индексу, индексация начинается с 0
:header выбор всех заголовков (h1, h2, h3, h4, h5, h6)
:not(selector) выбор всех селекторов, кроме указанных
фильтры видимости
:hidden выбор скрытых элементов
:visible выбор видимых элементов
фильтры атрибутов
[name] выбор элемента по названию атрибута
[name=value] выбор элемента по значению атрибута
[name!=value] выбор элемента, где значение атрибута не совпадает с указанным значением
[name^=value] выбор элемента, значение атрибута находится в начале
[name$=value] выбор элемента, значение атрибута находится в конце
[name*=value] выбор элемента, значение атрибута находится в любом месте
фильтры дочерних элементов
:first-child выбор всех первых дочерних элементов во всех вложенных элементах
:last-child выбор всех последних дочерних элементов во всех вложенных элементах
:only-child выбор единственного дочернего элемента во всех вложенных элементах
:nth-child(n) выбор всех дочерних элементов по указанному номеру во всех вложенных элементах, нумерация начинается с 1
:nth-child(even) выбор всех четных дочерних элементов во всех вложенных элементах
:nth-child(odd) выбор всех нечетных дочерних элементов во всех вложенных элементах
:nth-child(an+b) выбор всех дочерних элементов, рассчитанных по формуле a*n+b, где n, это счетчик 0, 1, 2…
фильтры элементов форм
:button выбор всех элементов с тегом button или с типом button (кнопка)
:submit выбор всех элементов с типом submit и с тегом button (кнопка)
:reset выбор всех элементов с типом reset (кнопка)
:image выбор всех элементов с типом image (кнопка)
:text выбор всех элементов с типом text (текстовое поле)
:password выбор всех элементов с типом password (пароль)
:checkbox выбор всех элементов с типом checkbox (флажок)
:radio выбор всех элементов с типом radio (переключатель)
:checked выбор всех выбранных элементов с типом checkbox (флажок) и типом radio (переключатель)
:input выбор всех элементов с тегом input
:enabled выбор всех активных элементов
:disabled выбор всех не активных элементов
 
 

*

Выбор всех элементов.
В этом примере будут выбраны все элементы. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div>Hello World!</div>
 <p>Привет Мир!</p>
 <ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
 </ul>
 <script>
  $(document).ready(function () {
   $('*').css({'color': '#F00', 'font-size': '24px'});
  });
 </script>
</body>
</html>
 
 
 

element

Выбор определенного элемента.
В этом примере будут выбраны все элемент div. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Если у элемента div есть вложенные элементы, то у вложенных элементов, содержащие текст, так же будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div>Hello World!</div>
 <p>Привет Мир!</p>
 <div>
  <ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
  </ul>
 </div>
 <script>
  $(document).ready(function () {
   $('div').css({'color': '#F00', 'font-size': '24px'});
  });
 </script>
</body>
</html>
 
 
 

id

Выбор элемента с указанным идентификатором.
В этом примере будет выбран элемент с идентификатором n2. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <ul>
  <li id="n1">One</li>
  <li id="n2">Two</li>
  <li id="n3">Three</li>
 </ul>
 <script>
  $(document).ready(function () {
   $('#n2').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

.class

Выбор элемента с указанным классом.
В этом примере будет выбран элемент с классом one. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .one {
   color: #00F;
  }
  .two {
   color: #0F0;
  }
 </style>
</head>
<body>
 <p class="one">Hello World!</p>
 <p class="two">Привет Мир!</p>
 <script>
  $(document).ready(function () {
   $('.one').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

селектор, селектор

Выбор нескольких селекторов одновременно.
При выборе нескольких селекторов одновременно, селекторы разделяются запятыми.
В этом примере будет выбран элемент с классом two и элемент с идентификатором n3. Если эти элементы содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .one {
   color: #000;
  }
  .two {
   color: #0F0;
  }
 </style>
</head>
<body>
 <p class="one">Hello World!</p>
 <p class="two">Привет Мир!</p>
 <div>
  <ul>
   <li id="n1">One</li>
   <li id="n2">Two</li>
   <li id="n3">Three</li>
  </ul>
 </div>
 <script>
  $(document).ready(function () {
   $('.two, #n3').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

уточнение

Выбор элемента с уточнением.
В данном примере, мы уточняем, что нам нужно выбрать элемент div с классом one. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .one {
   color: #00F;
  }
 </style>
</head>
<body>
 <div class="one">Hello World!</div>
 <p class="one">Привет Мир!</p>
 <div>
  <ul>
   <li class="one">One</li>
   <li class="one">Two</li>
   <li class="one">Three</li>
  </ul>
 </div>
 <script>
  $(document).ready(function () {
   $('div.one').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

родитель потомок

Выбор всех элементов потомков.
В этом примере будут выбраны все элементы потомки p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <p>ребенок P</p>
  <div>ребенок DIV</div>
  <p>ребенок P</p>
  <div>ребенок DIV</div>
  <div>
   <p>потомок P</p>
   <div>потомок DIV</div>
   <p>потомок P</p>
   <div>потомок DIV</div>
  </div>
  <p>ребенок P</p>
  <div>ребенок DIV</div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

родитель>ребенок

Выбор всех элементов детей.
В этом примере будут выбраны все элементы дети p или прямые потомки p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <p>ребенок P</p>
  <div>ребенок DIV</div>
  <p>ребенок P</p>
  <div>ребенок DIV</div>
  <div>
   <p>потомок P</p>
   <div>потомок DIV</div>
   <p>потомок P</p>
   <div>потомок DIV</div>
  </div>
  <p>ребенок P</p>
  <div>ребенок DIV</div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>p').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

селектор+элемент

Выбор одного следующего элемента.
В этом примере будет выбран элемент p, следующий за элементом div с идентификатором main на одном уровне вложенности.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">начало отсчета элемент DIV</div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <div>
  <p>вложенный элемент P второй уровень вложенности</p>
  <div>вложенный элемент DIV второй уровень вложенности</div>
  <p>вложенный элемент P второй уровень вложенности</p>
  <div>вложенный элемент DIV второй уровень вложенности</div>
 </div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <script>
  $(document).ready(function () {
   $('#main+p').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

селектор~элемент

Выбор всех следующих элементов.
В этом примере будут выбраны все следующие элементы p, следующие за элементом div с идентификатором main на одном уровне вложенности.
Если в элементе, следующем за изначальным, есть вложенные элементы p, то они выбраны не будут.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">начало отсчета элемент DIV</div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <div>
  <p>вложенный элемент P второй уровень вложенности</p>
  <div>вложенный элемент DIV второй уровень вложенности</div>
  <p>вложенный элемент P второй уровень вложенности</p>
  <div>вложенный элемент DIV второй уровень вложенности</div>
 </div>
 <p>элемент P первый уровень вложенности</p>
 <div>элемент DIV первый уровень вложенности</div>
 <script>
  $(document).ready(function () {
   $('#main~p').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:has(элемент)

Выбор элемента, который имеет потомков, указанных в скобках
В этом примере будут выбраны все элементы div, которые имеют потомком элемент p. Если этот элемент и его потомки, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div>элемент DIV не имеет потомков</div>
 <div>
  <p>элемент P первый уровень вложенности</p>
  <div>элемент DIV первый уровень вложенности</div>
 </div>
 <div>элемент DIV не имеет потомков</div>
 <div>
  <p>элемент P первый уровень вложенности</p>
  <div>элемент DIV первый уровень вложенности</div>
 </div>
 <script>
  $(document).ready(function () {
   $('div:has(p)').css({ 'color': '#F00', 'font-size': '24px' });
 
   //этот способ будет работать быстрее
   //$('div').has('p').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:parent

Выбор элемента, который является не пустым.
В этом примере будут выбраны все элементы div, которые содержат хотя бы пробел. Будет изменен цвет фона. Если этот элемент, содержит текст, то будет размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  div {
   height: 30px;
  }
 </style>
</head>
<body>
 <div></div>
 <div>этот элемент DIV не пустой</div>
 <div></div>
 <div>этот элемент DIV не пустой</div>
 <script>
  $(document).ready(function () {
   $('div:parent').css({ 'background-color': '#ffe1ff', 'font-size': '24px' });
 
   //этот способ будет работать быстрее
   //$('div').filter(':parent').css({ 'background-color': '#ffe1ff', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:empty

Выбор элемента, который является пустым.
В этом примере будут выбраны все элементы div и все элементы td, которые пустые. Будет изменен цвет фона.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  div {
   height: 30px;
  }
  table, td {
   border: 1px solid #00F;
   border-collapse: collapse;
  }
  td {
   height: 50px;
   width: 50px;
   text-align: center;
  }
 </style>
</head>
<body>
 <div></div>
 <div>этот элемент DIV не пустой</div>
 <div></div>
 <div>этот элемент DIV не пустой</div>
 <table>
  <tr>
   <td>1</td>
   <td></td>
   <td>2</td>
  </tr>
  <tr>
   <td></td>
   <td>3</td>
   <td></td>
  </tr>
  <tr>
   <td>4</td>
   <td></td>
   <td>5</td>
  </tr>
 </table>
 <script>
  $(document).ready(function () {
   $('div:empty').css({ 'background-color': '#ffe1ff', 'font-size': '24px' });
   $('td:empty').css({ 'background-color': '#ffe1ff' });
  });
 </script>
</body>
</html>
 
 
 

:contains(text)

Выбор элемента, содержащего указанный текст, даже если текст содержится в дочернем элементе.
В этом примере будут выбраны элементы div, которые имеют в своем тексте восклицательный знак. Если любой дочерний элемент содержит в тексте восклицательный знак, этот элемент div, также будет выбран. Будет изменен цвет фона и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  div {
   height: 30px;
  }
 </style>
</head>
<body>
 <div>Hello World!</div>
 <div>To be or not to be?</div>
 <div>Привет Мир!</div>
 <div>Быть или не быть?</div>
 <div>
  <p>Текст находится во вложенном элементе!</p>
 </div>
 <script>
  $(document).ready(function () {
   $('div:contains("!")').css({ 'background-color': '#ffe1ff', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:animated

Выбор элемента, который в данных момент участвует в анимации.
В этом примере, при открытии страницы, первые два элемента div будут делать анимацию, увеличиваться в ширину, затем уменьшаться в ширину, до исходного размера бесконечное количество раз. Если пользователь нажмет на кнопку, будут выбраны элементы div, которые делают анимацию и цвет этих элементов изменится. Если пользователь нажмет еще раз на кнопку, то цвет элементов станет изначальным.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a {
   height: 100px;
   width: 100px;
   margin: 25px;
   background-color: #3BA9DE;
  }
 
  .b {
   height: 100px;
   width: 100px;
   margin: 25px;
   background-color: #852E76;
  }
 
  #button {
   height: 100px;
   width: 100px;
   margin: 25px;
   cursor: pointer;
   border-radius: 5px;
   background-color: #E2E2E2;
   text-align: center;
   line-height: 100px;
   font-size: 26px;
   color: #852E76;
   font-weight: bold;
  }
 </style>
</head>
<body>
 <div id="box1" class="a"></div>
 <div id="box2" class="a"></div>
 <div class="a"></div>
 <div id="button">OK</div>
 <script>
  function funAnimate1() {
   $('#box1').animate({ 'width': '600px' }, 3000);
   $('#box1').animate({ 'width': '100px' }, 3000);
  }
  function funAnimate2() {
   $('#box2').animate({ 'width': '400px' }, 3000);
   $('#box2').animate({ 'width': '100px' }, 3000);
  }
  $(document).ready(function () {
   setInterval('funAnimate1()', 0);
   setInterval('funAnimate2()', 0);
   $('#button').click(function () {
    $('div:animated').toggleClass('b');
   });
  });
 </script>
</body>
</html>
 
 
 

:even

Выбор четных элементов, индексация начинается с 0.
0 является четным числом.
В этом примере будут выбраны все четные элементы p. Если эти элементы содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:even').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:odd

Выбор нечетных элементов, индексация начинается с 0.
0 является нечетным числом.
В этом примере будут выбраны все нечетные элементы p. Если эти элементы содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:odd').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:first

Выбор первого дочернего элемента.
В этом примере будет выбран первый элемент p. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:first').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:last

Выбор последнего дочернего элемента.
В этом примере будет выбран последний элемент p. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:last').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:gt(index)

Выбор всех элементов, которые следуют после указанного индекса, индексация начинается с 0.
В этом примере будут выбраны все элементы p, которые следуют за элементом p, находящимся по указанному индексу 5. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:gt(5)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:lt(index)

Выбор всех элементов, которые следуют до указанного индекса, индексация начинается с 0.
В этом примере будут выбраны все элементы p, которые следуют перед элементом p, находящимся по указанному индексу 5. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:lt(5)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:eq(index)

Выбор элемента по указанному индексу, индексация начинается с 0.
В этом примере будет выбран элемент p, с указанным индексом 5. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <p>Zero</p>
 <p>One</p>
 <p>Two</p>
 <p>Three</p>
 <p>Four</p>
 <p>Five</p>
 <p>Six</p>
 <p>Seven</p>
 <p>Eight</p>
 <p>Nine</p>
 <p>Ten</p>
 <script>
  $(document).ready(function () {
   $('p:eq(5)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:header

Выбор всех заголовков (h1, h2, h3, h4, h5, h6).
В этом примере будут выбраны все элементы, которые являются заголовками. Если эти элементы, содержат текст, то будет изменен цвет.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <h1>Hello World!</h1>
  <div>Hello World!</div>
  <h2>Hello World!</h2>
  <p>Hello World!</p>
  <h3>Hello World!</h3>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>:header').css({ 'color': '#F00' });
  });
 </script>
</body>
</html>
 
 
 

:not(selector)

Выбор всех селекторов, кроме указанных.
В этом примере будет выбраны все элемент p. Во всех элементах, кроме элементов p, содержащих текст, будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>Hello World!</div>
  <p>Hello World!</p>
  <h3>Hello World!</h3>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>:not(p)').css({ 'color': '#F00' });
  });
 </script>
</body>
</html>
 
 
 

:hidden

Выбор скрытых элементов.
В этом примере будут выбраны все скрытые дочерние элементы p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта, а также, эти элементы станут видимыми.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  p {
   height: 30px;
  }
 </style>
</head>
<body>
 <div id="main">
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>p:hidden').css({ 'display': 'block', 'color': '#F00', 'font-size': '24px'});
  });
 </script>
</body>
</html>
 
 
 

:visible

Выбор видимых элементов.
В этом примере будут выбраны все видимые дочерние элементы p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  p {
   height: 30px;
  }
 </style>
</head>
<body>
 <div id="main">
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
  <p hidden="hidden">этот элемент является скрытым</p>
  <p>этот элемент является видимым</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>p:visible').css({ 'color': '#F00', 'font-size': '24px'});
  });
 </script>
</body>
</html>
 
 
 

[name]

Выбор элемента по названию атрибута.
В этом примере будут выбраны все элементы, которые имеют атрибут id. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   font-style: italic;
  }
 </style>
</head>
<body>
 <div id="main">
  <p id="p1">One</p>
  <p>Two</p>
  <p class="a">Three</p>
  <p>Four</p>
  <p id="p2">Five</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main>p[id]').css({ 'color': '#F00', 'font-size': '24px'});
  });
 </script>
</body>
</html>
 
 
 

[name=value]

Выбор элемента по значению атрибута.
В этом примере будут выбраны все элементы с атрибутом type=text. Рамка будет иметь красный цвет. Будет выбран элемент с атрибутом type=submit. С помощью функции val(), на кнопку будет добавлен текст OK.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <form>
  <input type="text" />
  <br />
  <br />
  <input type="text" />
  <br />
  <br />
  <input type="submit"/>
 </form>
 <script>
  $(document).ready(function () {
   $('form>[type=text]').css({ 'border': '1px solid #F00' });
   $('form>[type=submit]').val('OK');
  });
 </script>
</body>
</html>
 
 
 

[name!=value]

Выбор элемента, где значение атрибута не совпадает с указанным значением.
В этом примере будут выбраны элементы с атрибутом type=!submit. Рамка у этих элементов будет иметь красный цвет.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <form>
  <input type="text" />
  <br />
  <br />
  <input type="text" />
  <br />
  <br />
  <input type="submit" value="OK"/>
 </form>
 <script>
  $(document).ready(function () {
   $('form>[type!=submit]').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

[name^=value]

Выбор элемента, значение атрибута находится в начале.
В этом примере будут выбраны все элементы с атрибутом href, значение которых начинается символами http://. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <a href="http://fb3809fm.bget.ru" target="_blank">http://fb3809fm.bget.ru</a>
  <br />
  <br />
  <a href="https://www.google.com/webmasters/tools/home?hl=ru" target="_blank">https://www.google.com/webmasters/tools/home?hl=ru</a>
  <br />
  <br />
  <a href="http://fr38060s.bget.ru" target="_blank">http://fr38060s.bget.ru</a>
 </div>
 <script>
  $(document).ready(function () {
   $("#main>[href^='http://']").css({ 'color': '#852E76', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

[name$=value]

Выбор элемента, значение атрибута находится в конце.
В этом примере будут выбраны все элементы с атрибутом href, значение которых заканчивается символами .bget.ru. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <a href="http://fb3809fm.bget.ru" target="_blank">http://fb3809fm.bget.ru</a>
  <br />
  <br />
  <a href="https://www.google.com/webmasters/tools/home?hl=ru" target="_blank">https://www.google.com/webmasters/tools/home?hl=ru</a>
  <br />
  <br />
  <a href="http://fr38060s.bget.ru" target="_blank">http://fr38060s.bget.ru</a>
 </div>
 <script>
  $(document).ready(function () {
   $("#main>[href$='.bget.ru']").css({ 'color': '#852E76', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

[name*=value]

Выбор элемента, значение атрибута находится в любом месте.
В этом примере будут выбраны все элементы с атрибутом href, где в любом месте значения будут символы ://. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <a href="http://fb3809fm.bget.ru" target="_blank">http://fb3809fm.bget.ru</a>
  <br />
  <br />
  <a href="https://www.google.com/webmasters/tools/home?hl=ru" target="_blank">https://www.google.com/webmasters/tools/home?hl=ru</a>
  <br />
  <br />
  <a href="http://fr38060s.bget.ru" target="_blank">http://fr38060s.bget.ru</a>
 </div>
 <script>
  $(document).ready(function () {
   $("#main>[href*='://']").css({ 'color': '#852E76', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:first-child

Выбор всех первых дочерних элементов во всех вложенных элементах.
В этом примере будут выбраны все первые дочерние элементы p, во всех вложенных элементах. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:first-child').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:last-child

Выбор всех последних дочерних элементов во всех вложенных элементах.
В этом примере будут выбраны все последние дочерние элементы p, во всех вложенных элементах. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:last-child').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:only-child

Выбор единственного дочернего элемента во всех вложенных элементах.
В этом примере, из всех дочерних элементов будет выбран единственный дочерний элемент p, во всех вложенных элементах. Если этот элемент, содержит текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
  </div>
  <div>
   <p>Single</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:only-child').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:nth-child(n)

Выбор всех дочерних элементов по указанному номеру во всех вложенных элементах, нумерация начинается с 1.
В этом примере будут выбраны все вторые дочерние элементы p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:nth-child(2)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:nth-child(even)

Выбор всех четных дочерних элементов во всех вложенных элементах.
В этом примере будут выбраны все четные дочерние элементы p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
   <p>Four</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
   <p>Четыре</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:nth-child(even)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:nth-child(odd)

Выбор всех нечетных дочерних элементов во всех вложенных элементах.
В этом примере будут выбраны все нечетные дочерние элементы p. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
   <p>Four</p>
  </div>
  <div>
   <p>Один</p>
   <p>Два</p>
   <p>Три</p>
   <p>Четыре</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:nth-child(odd)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:nth-child(an+b)

Выбор всех дочерних элементов, рассчитанных по формуле a*n+b, где n, это счетчик 0, 1, 2…
2n+1
2*0+1=1
2*1+1=3
2*2+1=5
2*3+1=7
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
   <p>4</p>
   <p>5</p>
   <p>6</p>
   <p>7</p>
   <p>8</p>
  </div>
  <div>
   <p>One</p>
   <p>Two</p>
   <p>Three</p>
   <p>Four</p>
   <p>Five</p>
   <p>Six</p>
   <p>Seven</p>
   <p>Eight</p>
  </div>
 </div>
 <script>
  $(document).ready(function () {
   $('#main p:nth-child(2n+1)').css({ 'color': '#F00', 'font-size': '24px' });
  });
 </script>
</body>
</html>
 
 
 

:button

Выбор всех элементов с тегом button или с типом button.
В этом примере будут выбраны все элементы с тегом button и с типом button. Элемент input с типом submit, который так же является кнопкой, выбран не будет. В выбранных элементах будет изменен текст, размер шрифта и цвет границ.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="submit" value="тип submit" />
   <br />
   <br />
   <input type="reset" value="тип reset" />
   <br />
   <br />
   <button>тег button</button>
   <br />
   <br />
   <input type="button" value="тип button" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:button').css({ 'color': '#F00', 'font-size': '24px', 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:submit

Выбор всех элементов с типом submit и с тегом button.
В этом примере будут выбраны все элементы с тегом submit и с тегом button. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта, и цвет границ.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="submit" value="тип submit" />
   <br />
   <br />
   <input type="reset" value="тип reset" />
   <br />
   <br />
   <button>тег button</button>
   <br />
   <br />
   <input type="button" value="тип button" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:submit').css({ 'color': '#F00', 'font-size': '24px', 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:reset

Выбор всех элементов с типом reset.
В этом примере будут выбраны все элементы с тегом reset. Если эти элементы, содержат текст, то будет изменен цвет и размер шрифта, и цвет границ.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="submit" value="тип submit" />
   <br />
   <br />
   <input type="reset" value="тип reset" />
   <br />
   <br />
   <button>тег button</button>
   <br />
   <br />
   <input type="button" value="тип button" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:reset').css({ 'color': '#F00', 'font-size': '24px', 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:image

Выбор всех элементов с типом image.
В этом примере будут выбраны элементы с типом image. Во всех выбранных элементах будет изменен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <input type="image" src="img/a.jpg" />
 </div>
 <script>
  $(document).ready(function () {
   $('#main>:image').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:text

Выбор всех элементов с типом text.
В этом примере будут выбраны элементы с типом text. Во всех выбранных элементах будет изменен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" placeholder="username" />
   <br />
   <br />
   <input type="password" placeholder="password" />
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:text').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:password

Выбор всех элементов с типом password.
В этом примере будут выбраны элементы с типом password. Во всех выбранных элементах будет изменен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" placeholder="username" />
   <br />
   <br />
   <input type="password" placeholder="password" />
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:password').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:checkbox

Выбор всех элементов с типом checkbox.
В этом примере будут выбраны элементы с типом checkbox. Напрямую, работать с выбранными элементами нельзя. Нужно обернуть их в элемент span, затем выбрать этот элемент span, как родительский и этому элементу span изменить цвет границ. Вот так все сложно.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="checkbox" checked="checked" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="radio" checked="checked" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   /*такой код не работает*/
   //$('form>input:checkbox').css({ 'border': '1px solid #F00' });
 
   $('form>input:checkbox').wrap('<span></span>').parent().css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:radio

Выбор всех элементов с типом radio.
В этом примере будут выбраны элементы с типом radio. Напрямую, работать с выбранными элементами нельзя. Нужно обернуть их в элемент span, затем выбрать этот элемент span, как родительский и этому элементу span изменить цвет границ. Вот так все сложно.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="checkbox" checked="checked" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="radio" checked="checked" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   /*такой код не работает*/
   //$('form>input:radio').css({ 'border': '1px solid #F00' });
 
   $('form>input:radio').wrap('<span></span>').parent().css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:checked

Выбор всех выбранных элементов с типом checkbox (флажок) и типом radio (переключатель).
В этом примере будут выбраны все выбранные элементы с типом checkbox и с типом radio. Напрямую, работать с выбранными элементами нельзя. Нужно обернуть их в элемент span, затем выбрать этот элемент span, как родительский и этому элементу span изменить цвет границ. Вот так все сложно.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="checkbox" checked="checked" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="radio" checked="checked" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   /*такой код не работает*/
   //$('form>input:checked').css({ 'border': '1px solid #F00' });
 
   $('form>input:checked').wrap('<span></span>').parent().css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:input

Выбор всех элементов с тегом input.
В этом примере будут выбраны элементы input. У выбранных элементов будет измен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <form>
   <input type="text" />
   <br />
   <br />
   <input type="checkbox" checked="checked" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <input type="checkbox" name="one" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="radio" checked="checked" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <input type="radio" name="two" />
   &nbsp;&nbsp;&nbsp;
   <br />
   <br />
   <input type="submit" value="OK" />
  </form>
 </div>
 <script>
  $(document).ready(function () {
   $('form>:input').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:enabled

Выбор всех активных элементов.
В этом примере будут выбраны активные элементы. У выбранных элементов будет измен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <input type="text" placeholder="enabled" />
  <br />
  <br />
  <input type="text" placeholder="disabled" disabled="disabled" />
  <br />
  <br />
  <input type="text" placeholder="enabled" />
  <br />
  <br />
  <input type="text" placeholder="disabled" disabled="disabled" />
 </div>
 <script>
  $(document).ready(function () {
   $('#main>:enabled').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>
 
 
 

:disabled

Выбор всех не активных элементов.
В этом примере будут выбраны не активные элементы. У выбранных элементов будет измен цвет границы.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <input type="text" placeholder="enabled" />
  <br />
  <br />
  <input type="text" placeholder="disabled" disabled="disabled" />
  <br />
  <br />
  <input type="text" placeholder="enabled" />
  <br />
  <br />
  <input type="text" placeholder="disabled" disabled="disabled" />
 </div>
 <script>
  $(document).ready(function () {
   $('#main>:disabled').css({ 'border': '1px solid #F00' });
  });
 </script>
</body>
</html>