Պսևդոկլասներ և պսևդոէլեմենտներ
Պսևդոէլեմենտներ
Պսևդոէլեմենտներն используются для стилизации определенной части элемента.
Например: ::first-letter – определяет стиль первого символа первой строки текста.
С селектором используется только один псевдоэлемент. Он определяется после основного селектора.
Псевдоэлементы определяются двумя ``:'', а псевдоклассы определяются одним ``.''.
В каждом "." можно встретить псевдоэлементы. с , если стиль соответствует версии CSS2.
Псевдоэлементы
::after
::after -добавляет часть в конец основного текста.
content Свойство определяет добавляемую часть.
p::after {
content: "Hayti կայքում";
background-color: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Изучите HTML</p>
<p>Изучите CSS</p>
<p>Изучите бутстрап</p>
<p>Изучите дерзость</p>
</body>
</html>
::before
::before - добавляет любую часть в начало текста.
content Свойство определяет добавляемую часть.
p::before {
content: "👍";
background-color: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Изучите HTML</p>
<p>Изучите CSS</p>
<p>Изучите бутстрап</p>
<p>Изучите дерзость</p>
</body>
</html>
::cue
::cue - стилизует субтитры видео.
::cue {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<video autoplay controls src="Html-lesson.mp4">
<track default src="html-lessons.vtt" />
</video>
</body>
</html>
Используются следующие свойства:
background – устанавливает фон подписи.
color – задает цвет текста субтитров.
font - меняет шрифт субтитров.
line-height – определяет расстояние между линиями.
opacity – устанавливает прозрачность текста.
outline – определяет стиль границ подписи.
ruby-position – если субтитры состоят из азиатских символов, определяет место их пояснения: over- верх или under- дно.
text-combine-upright - при вертикальном изображении текста, в случае азиатских символов, цифры располагаются наклонно. Свойство используется для того, чтобы сделать их горизонтальными и не выходить за границы символов, установив значение «all". Также определены «none и: digits()"Значение. noneв случае , положение символов не изменится, но digits()-не поддерживается браузерами.
text-decoration – задает стиль выделения текста.
text-shadow - добавляет тень к тексту.
visibility – текст становится невидимым, но его площадь не теряется. Он имеет три значения: «visible, hidden, collapse". Первый сделает текст видимым, второй сделает его невидимым, но выделенное пространство останется таким же, как если бы текст был на месте. развал предназначен для стола.
white-space - определяет, как будут обрабатываться датчики в элементе.
::first-letter
::first-letter – Устанавливает стиль первого символа первой строки текста.
p::first-letter {
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>
С помощью Html вы легко сможете создать относительно простой, но красиво оформленный документ.
</p>
</body>
</html>
::first-line
::first-line - Устанавливает стиль только для первой строки текста.
p::first-line {
color: red;
}
::selection
::selection – задает стиль для выбранного пользователем фрагмента текста.
Для этого будут использоваться следующие свойства CSS: color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, text-shadow.
p::selection {
color: white;
background: orange;
}
::backdrop
::backdrop – վեբ էջում վերին շերտի էլեմենտի ոճավորման համար է․ օրինակ՝ fullscreeen` երբ վիդեոն բացվում է լիաէկրան ռեժիմով, կամ որևէ մոդալ պատուհան և այլն։
video::backdrop {
background-color: red;
}
::placeholder
::placeholder - определяет стиль.
input::placeholder {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" placeholder="Введите текст..." />
</body>
</html>
::marker
::marker – используется для стилизации маркеров списка.
li::marker {
color: red;
}
::text-target
::text-target – когда пользователь обращается к странице, псевдоэлемент стилизация и рендеринг браузером в любой части веб-страницы.
Определяется следующим образом: « # за " следует " :~:text= " часть, после которой вставляется часть текста, которую необходимо переместить автоматически. Например:
https://www.lipsum.com/#:~:text=с:ection%201.10.32%20of%20%22de%20finibus%20bonorum%20et%20malorum%22%2C%20written%20by%20cicero%20in%2045%20bc
Для создания такого типа ссылок к браузеру прилагаются плагины, с помощью которых это будет легко сделать. Например, " Link to Text Fragment " Плагин для Chrome.
Адрес плагина:
https://chrome.google.com/webstore/detail/link-to-text-fragment/pbcodcjpfjdpcineamnnmbkkmkdpajjg
Вот как его использовать:
- сначала необходимо установить плагин в браузер (перейти по указанному выше адресу и нажать « install или установить " кнопка).
Вот как сделать ссылку:
Так ::target-text будет стилизовать данный раздел на веб-странице.
На первой веб-странице:
html {
width: 620px;
background-color: grey;
}
<body>
<img decoding="async" src="forest-2.jpg" style="width: 600px" />
<div>
Lorem ipsum dolor сидеть amet,
<a
href="http://mysite.am:8080/example2.html#:~:text=vivamus%20non%20ipsum%20 eleifend%2C%20porttitor%20nisi%20ac%2C%20luctus" data-no-auto-translation=""
>consectetur</a
>
adipiscing elit. Aliquam nec…… urna gravida pellentesque.
</div>
</body>
На второй веб-странице:
body {
width: 620px;
background-color: rgb(104, 70, 70);
}
::target-text {
color: orange;
background-color: black;
}
<body>
<img decoding="async" src="forest.jpg" style="width: 600px" />
<div>
Lorem ipsum dolor sit amet……Nulla facilisi. Vivamus non ipsum eleifend, porttitor nisi ac, luctus elit. ………это урна беременных пеллентесковая.
</div>
</body>
Պսևդոկլասներ
Պսևդոկլասների элементы становятся более динамичными при взаимодействии с пользователем на странице.
Псевдоклассы определяются одним знаком " ." с ".
В отличие от псевдоэлементов, псевдоклассы могут стилизовать элемент в зависимости от его состояния. Например: :disabled -стилизует все недоступные элементы (у которых установлен атрибут отключен).
Псевдоклассы – это:
:link :visited :hover :active
:link :visited :hover :active - обычно используются <a data-no-auto-translation=""> էլեմենտի հետ։ ” :link ” -ը սահմանում է ոճ չայցելած հասցեների համար, ” :visited ” -ը՝ այցելած հասցեների համար, ” :hover ” -ը՝ երբ մկնիկի սլաքը հասցեի վրա է, ” :active ” -ը՝ հասցեին սեղմելու պահին։
a:link {
color: blue;
}
a:visited {
color: grow;
}
a:hover {
color: white;
background: orange;
}
a:active {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a href="/ru/html-less.html/" data-no-auto-translation="">html css դասընթաց</a>
<a href="#" data-no-auto-translation="">bootstrap դասընթաց</a>
<a href="#" data-no-auto-translation="">Javascript դասընթաց</a>
</body>
</html>
:is() :matches() :any()
:is() :matches() :any() – :is() заменил :matches(), а последний заменил :any().
:is() проверяет, является ли элемент дочерним в :is(…) для перечисленных.
Например, извините, только» статья, раздел и в сторону «h1» дочерние элементы элементов станут красными. Его можно определить двумя способами:
article h1, section h1, aside h1 { color: red; }
С помощью :is() он будет определен более кратко:
:is(article, section, aside) h1 {
color: red;
}
Если вам нужно установить красный цвет для всех типов заголовков, то:
article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6 {
color: red;
}
или установите его с помощью :is():
:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
color: red;
}
Это означает следующее: если элемент является дочерним элементом «статья, раздел и в сторону» и если это «h1, h2, h3, h4, h5 и h6: введите текст, а затем настройте его.
Существует обратный псевдокласс :is(): :not()-час Это позволяет, например, применить стиль ко всем заголовкам, которые չեն является дочерним из перечисленных в :not(…):
:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
color: red;
}
:where()
:where() – соответствует псевдоклассу :is().
Есть одно отличие: в :is() указано "классы селектора“ те, что за пределами :is(), будут иметь приоритет “из элементов селектора“։ Для :where() наоборот: «элементы выбора“ " указанный в :where() будет иметь приоритетиз классов селекторов“։
html {
font-family: sans-serif;
font-size: 150%;
}
:is(section.is-styling, aside.is-styling, footer.is-styling) a {
color: red;
}
:where(section.where-styling, aside.where-styling, footer.where-styling) a {
color: orange;
}
footer a {
color: blue;
}
<body>
<article>
<h2 data-no-auto-translation="">:is()-styled links</h2>
<section class="is-styling">
<p>
Вот мой основной контент. Этот:
<a href="https://mozilla.org" data-no-auto-translation="">contains a link</a>.
</p>
</section>
<aside class="is-styling">
<p>
Вот мой дополнительный контент. Этот:
<a href="https://developer.mozilla.org" data-no-auto-translation="">also contains a link</a>.
</p>
</aside>
<footer class="is-styling">
<p>
Это мой нижний колонтитул, также содержащий:
<a href="https://github.com/mdn" data-no-auto-translation="">a link</a>.
</p>
</footer>
</article>
<article>
<h2 data-no-auto-translation="">:where()-styled links</h2>
<section class="where-styling">
<p>
Вот мой основной контент. Этот:
<a href="https://mozilla.org" data-no-auto-translation="">contains a link</a>.
</p>
</section>
<aside class="where-styling">
<p>
Вот мой дополнительный контент. Этот:
<a href="https://developer.mozilla.org" data-no-auto-translation="">also contains a link</a>.
</p>
</aside>
<footer class="where-styling">
<p>
Это мой нижний колонтитул, также содержащий:
<a href="https://github.com/mdn" data-no-auto-translation="">a link</a>.
</p>
</footer>
</article>
</body>
В следующем примере элемент селектора footer a имеет приоритет над классом селектора footer.where-styling, указанным в :where().
Класс селектора footer.is-styling имеет приоритет над элементом селектора footer a в :is().
Поэтому в первом примере (в случае:is()) цвет последней ссылки не изменился на синий, а во втором (в случае:where()) — изменился.
Псевдоклассы :is() :where() имеют еще одно преимущество.
В следующем примере, если какой-либо браузер не поддерживает, например, :unsupported, он будет проигнорирован, но :valid не потеряет своего эффекта.
:where(:valid, :unsupported) {
...
}
Без псевдоклассов :is(), :where(), если какой-либо браузер не поддерживает, например, :unsupported, то все перечисленные потеряют свой эффект.
:valid, :unsupported {
...
}
:any-link
:any-link - это для справки(<a data-no-auto-translation="">, <area>, <link>), որոնք ունեն href ատրիբուտը։
:any-link будет стилизовать все ссылки на веб-странице независимо от посещенных.
a:any-link {
color: orange;
}
:checked
:checked – стилизует все выбранные элементы переключателей, флажков и опций (например, ).
input:checked + span {
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" name="a1" /><span>HTML:</span><br />
<input type="checkbox" name="a2" /><span>CSS:</span><br />
<input type="checkbox" name="a3" /><span>начальная загрузка:</span><br />
<input type="checkbox" name="a4" /><span>яваскрипт:</span><br />
</body>
</html>
:default
:default – стилизует элементы по умолчанию.
В использовании <button>, <input type=”checkbox”>, <input type= “radio”> և <option> с элементами.
input:default + span {
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" name="a1" /><span>HTML:</span><br />
<input type="checkbox" name="a2" checked /><span>CSS:</span><br />
<input type="checkbox" name="a3" /><span>начальная загрузка:</span><br />
<input type="checkbox" name="a4" /><span>яваскрипт:</span><br />
</body>
</html>
:defined
:defined – стилизует все элементы веб-страницы (также «custom-elements» – элементы HTML, созданные нами с использованием Javascript).
:defined {
background: red;
font-style: italic;
}
.div01 {
height: 200px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Привет, мир!</p>
<div class="div01"></div>
</body>
</html>
Здесь <body>, <p> и: <div> фон элементов выделен красным цветом, а текст — курсивом.
:dir()
:dir() - стилизация dir элементы, использующие атрибут.
Принимает три значения:
rtl- будет стилизовано, если текст написан правшой.
ltr - будет стилизован, если текст написан левшой.
auto — стилизуют те, направление текста которых определяется браузером в соответствии с используемым языком.
Поддерживается только Firefox браузером.
div:dir(ltr) {
background-color: orange;
}
div:dir(rtl) {
background-color: grey;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div dir="rtl">
<span>Пример-1</span>
<div dir="ltr">Пример-2</div>
<div dir="auto">в</div>
</div>
</body>
</html>
:disabled
:disabled – стилизует элементы, которые имеют disabled атрибут.
input:disabled {
background: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text">Имя:</input><br>
<input type="text">Фамилия:</input><br>
<input type="text" disabled>Адрес:</input><br>
</body>
</html>
:empty
:empty – стилизует пустые элементы.
:empty {
background-color: red;
}
td {
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table border="1">
<tr>
<td>Коробка-1:</td>
<td>Коробка-2</td>
<td></td>
</tr>
<tr>
<td>Коробка-4:</td>
<td></td>
<td>Коробка-6:</td>
</tr>
</table>
</body>
</html>
:enabled
:enabled — стилизуют доступные элементы, которые можно активировать: выбрать, написать любой текст и т. д.
input:enabled {
background: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text">Имя:</input><br>
<input type="text">Фамилия:</input><br>
<input type="text" disabled>Адрес:</input><br>
</body>
</html>
:first :left :right
:first :left :right - Смотреть@Կանոններ՛ в отделе. Только б/у @page с правилом.
:first-child
:first-child – предназначено для первого дочернего элемента родительского элемента, соответствующего указанному перед псевдоклассом, в данном случае p к
p:first-child {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Этот текст будет стилизован, потому что он первый в элементе div.</p>
<p>Этот текст не будет стилизован.</p>
</div>
<div>
<h2 data-no-auto-translation="">Այս տեքստին ոճ չի սահմանվի։ Այն չի հանդիսանում p էլեմենտ։</h2>
<p>
Этот текст не будет стилизован, поскольку он не первый в элементе div.
</p>
</div>
</body>
</html>
:first-of-type
:first-of-type — Например, в родительском элементе 3 типа элементов по два каждого. Псевдокласс определит стиль для первого элемента каждого типа.
Селектор необходимо отделить от псевдокласса запятой (это будет означать, что там определен универсальный селектор: " * "), иначе результат будет другим.
article :first-of-type { /* նույնն է ինչ՝ article *:first-of-type */
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<h1 data-no-auto-translation="">Թմբկաբերդի առումը</h1>
<p>Автор: Оганес Туманян</p>
<p>Отправить электронную книгу по адресу:</p>
<address>Электронная почта: адрес: hayti@gmail.com</address>
<p>
Книга была написана <time datetime="1902-10-16">в 1902 году,</time> и опубликовано <time datetime="1905-11-20"> в 1905 году. </time>
</p>
</article>
</body>
</html>
:fullscreen
:fullscreen – Используя Javascript, можно отобразить элемент в полноэкранном режиме и псевдокласс используется для стилизации того, что отображается в полноэкранном режиме.
function fullScreen() {
var el = document.getElementById("msg"); // ստանում ենք էլեմենտը
if (el.webkitRequestFullscreen)
el.webkitRequestFullscreen(); // Chrome, Opera, Safari – ի համար
else if (el.mozRequestFullScreen)
el.mozRequestFullScreen(); // Firefox-ի համար
else if (el.msRequestFullscreen)
el.msRequestFullscreen(); // Internet Explorer, Edge – ի համար
else if (el.requestFullscreen) el.requestFullscreen(); // Ստանդարտ
}
body {
margin: 0;
}
#msg {
padding: 10px;
background: #bc7062;
color: #fff;
}
#msg:-ms-fullscreen {
background: #6088a5;
}
#msg:-webkit-full-screen {
background: #6088a5;
}
#msg:-moz-full-screen {
background: #6088a5;
}
/* ms(Internet Explorer, Edge), webkit(Chrome, Opera, Safari), moz(Firefox)-ի միջոցով նշում ենք բրաուզերներների տեսակները։ */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="my-script.js"></script>
<div id="msg">
Этот раздел будет отображаться только в полноэкранном режиме. Данный div изменит свой цвет на указанный.
</div>
<p>
Это, например, чтобы увидеть, что последний не будет отображаться в полноэкранном режиме.
</p>
<p><button onclick="fullScreen()">Просмотр в полноэкранном режиме.</button></p>
</body>
</html>
:focus
:focus – предназначено, когда элемент получает фокус, например « » (при нажатии на поле ввода оно становится активным, то есть получает фокус).
.red-input:focus {
color: red;
}
.green-input:focus {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input class="red-input" value="ստանալով ֆոկուս՝ կկարմրի" />
<input class="green-input" value="ստանալով ֆոկուս՝ կկանաչի" />
</body>
</html>
:indeterminate
:indeterminate - предназначено для конвертеров (чекбокс, радио), когда они неактивны.
В случае с флажком вам необходимо добавить код Javascript.
Этот псевдокласс также используется с элементом.
Например:
input:indeterminate + label {
background: lime;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<form action="">
<input type="checkbox" id="checkbox" />
<label for="checkbox">Эта метка будет зеленой.</label>
<script>
var checkbox = document.getElementById("checkbox");
checkbox.indeterminate = true;
</script>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</div>
<div>
<form action="">
<input type="radio" id="radio" name="option" />
<label for="radio">Эта метка будет зеленой.</label>
<input type="radio" id="radioo" name="option" />
<label for="radioo">Эта метка будет зеленой.</label>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</div>
<progress></progress>
</body>
</html>
:in-range :out-of-range
:in-range :out-of-range - предназначен для для определенных типов элементов: number, range, date, datetime, datetime-local, month, time и: week.
Например, число — поле для чисел, в котором определен диапазон чисел. Если номер находится в диапазоне, он будет активирован. :in-range , и если он находится вне зоны действия, он активируется :out-of-rangeтот
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: " ընդունելի է";
}
input:out-of-range + label::after {
content: "դիապազոնից դուրս է";
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="" id="form1" data-trp-original-action="">
<ul>
Отметьте цифру от 1 до 10.
<li>
<input
id="value1"
name="value1"
type="number"
placeholder="1 - 10"
min="1"
max="10"
value="12"
/>
<label for="value1">Указанный вами номер - </label>
</li>
</ul>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:invalid :valid :required
:invalid :valid :required - предназначены и: Недопустимое содержимое полей элемента: :invalid и действительный :valid для штатов.
:required предназначен required для элементов с атрибутом.
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="">
<label>Введите URL-адрес.</label>
<input type="url" />
<label>Введите адрес электронной почты адрес.</label>
<input type="email" required />
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:lang()
:lang() – выбирает элементы на основе языка, определенного для элемента lang в атрибуте.
.class1:lang(hy) {
color: red;
}
.class1:lang(ru) {
color: blue;
}
.class1:lang(en) {
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p class="class1" lang="hy">Привет, страна!!</p>
<p class="class1" lang="ru">Привет, мир!!</p>
<p class="class1" lang="en">Привет, мир!!</p>
<p></p>
</body>
</html>
:last-child
:last-child – зарезервировано для последнего дочернего элемента в родительском элементе.
Селектор необходимо отделить от псевдокласса пробником, иначе результат будет другим.
div :last-child {
background-color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>Привет, мир!!</p>
<p>Привет, мир!!</p>
<p>Привет, мир!!</p>
</div>
</body>
</html>
:last-of-type
:last-of-type - в элементе 3 типа дочерних элементов по два каждого. Он разработан как последний в своем роде для упомянутых дочерних элементов.
Селектор должен быть отделен от псевдокласса двоеточием, что означает, что там определен универсальный селектор: " * ", иначе результат будет другим.
article *:last-of-type { /* սա նույնն է ինչ՝ article :last-of-type */
color: red;
font-style: italic;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<div>Это первый элемент типа div.</div>
<div><span>Этот пролет является последним в своем роде.</span></div>
<div>
<em> em первый в своем роде</em>, и это,
<em>последний.</em>
</div>
<b data-no-auto-translation=""> b տեսակի մեջ վերջինն է։</b>
<div>Это последний элемент типа div.</div>
</article>
</body>
</html>
:not()
:not() – Исключает перечисленные в скобках и игнорирует остальные.
Псевдоклассы, элементы селектора, идентификаторы, классы и атрибуты селектора могут быть указаны в круглых скобках.
Запрещено указывать псевдоэлементы и использовать само по себе ( :not(:not(…)) ).
input:not([type="submit"]) {
border: 1px solid orange;
padding: 3px;
}
p:not(.class01) {
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="/ru/handler.php/" data-trp-original-action="handler.php">
<p class="class01">Ваше имя: <input name="user" /></p>
<p>Выберите файл. <input type="file" name="file" /></p>
<p><input type="submit" value="Отправлять" /></p>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:nth-child() :nth-last-child()
:nth-child() :nth-last-child() - :nth-child() предназначен для стилизации элементов в соответствии с их нумерацией в порядке возрастания, и :nth-last-child() наоборот, в порядке убывания.
Принимает в качестве свойства:
odd – все дочерние нечетные элементы в родительском элементе.
even - все дочерние элементы пары в родительском элементе.
թիվ - порядковые номера дочерних элементов в родительском элементе по формуле «an±b».
Нумерация начинается с 1, который является первым дочерним элементом родительского элемента.
В псевдоклассе элементы определяются an±b` (a*n +(-) b ) по формуле где aи bявляются целыми числами, а nэто счетчик и начинается 0от
Если: aравно 0, оно не будет указываться и будет сокращено до b- например " 0n+5 », կամ: 5.
Если: bравен 0, он не будет отмечен и будет усечен снова; например " 4n+0 ", или: 4n:
a и b могут быть и отрицательными числами, смысл которых мы увидим чуть позже.
Так:
| Արժեքը | Թվերի հաջորդակNC | Предыдущий |
|---|---|---|
|
1 |
1 |
Первый элемент: то же, что и :first-child. |
|
5 |
5 |
Пятый элемент. |
|
2н: |
2,4,6,8,10... 1.n=0; 2×0 = 0; 2.n=1; 2×1 = 2; 3.n=2; 2×2 = 4; ….. |
Все четные элементы: то же самое, что даже. |
|
2n+1 |
1,3,5,7,9….. 1. n=0; 2×0 + 1 = 1; 2. п=1; 2×1 +1 = 3; 3. п=2; 2×2 + 1 = 5; ……. |
Все нечетные элементы: то же, что странный. |
|
3н: |
3,6,9,12,15….. 1. n=0; 3×0 = 0; 2. п=1; 3×1 = 3; 3. п=2; 3×2 = 6;…… |
Каждый третий элемент |
|
3n+2 |
2,5,8,11,14….. 1. n=0; 3×0 + 2= 2; 2. п=1; 3×1 + 2 = 5; 3. п=2; 3×2 + 2= 8;…….. |
Каждый третий элемент, начиная со второго. |
|
п + 4 |
4,5,6,7,8….. 1. n=0; 0 + 4 = 4; 2. п=1; 1 + 4 = 5; 3. п=2; 2 + 4 = 6; |
Все элементы, кроме первых трех. |
|
-n+3 |
3,2,1 1. n=0; 0 + 3 = 3; 2. n=-1; -1 + 3 = 2; 3. n=-2; -2 + 3 = 1; |
Первые три элемента. |
|
5н-2 |
3,8,13,18,23 1. n=0; 5×0 – 2 = -2; 2. п=1; 5×1 – 2= 3; 3. п=2; 5×2 – 2= 8…… |
Каждый пятый элемент, начиная с 3.
|
|
even |
2,4,6,8,10….. |
Все четные элементы. |
|
odd |
1,3,5,7,9….. |
Все странные элементы. |
|
:nth-child(n+8):nth-child(-n+14) |
:nth-child(n+8) = 8,9...14,15... :nth-child(-n+14) = 1-14 1-14 и 8-15… = 8-14 |
Элементы с 8 по 14. |
table {
width: 100%;
border-spacing: 0;
}
tr :nth-child(2n) {
background: #f0f0f0;
}
tr :nth-child(1) {
background: #567;
color: #fff;
}
tr :nth-child(n + 3):nth-child(-n + 6):nth-child(odd) {
background: orange;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nth-child</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table border="1">
<tr>
<td></td>
<td>ОДИН:</td>
<td>ДВА:</td>
<td>ТРИ:</td>
<td>ЧЕТВЕРТОЕ:</td>
<td>ПЯТЬ:</td>
</tr>
<tr>
<td>Первые цифры:</td>
<td>16</td>
<td>34</td>
<td>62</td>
<td>74</td>
<td>57</td>
</tr>
<tr>
<td>Вторые номера:</td>
<td>4</td>
<td>69</td>
<td>72</td>
<td>56</td>
<td>47</td>
</tr>
<tr>
<td>Третьи номера:</td>
<td>7</td>
<td>73</td>
<td>79</td>
<td>34</td>
<td>86</td>
</tr>
<tr>
<td>Четвертые цифры:</td>
<td>23</td>
<td>34</td>
<td>88</td>
<td>53</td>
<td>103</td>
</tr>
</table>
</body>
</html>
:nth-of-type() :nth-last-of-type()
:nth-of-type() :nth-last-of-type() - :nth-of-type такой же как :nth-childтот Есть одно отличие: :nth-child , нумерация дочерних элементов в родительском элементе производится по порядку, без учета типа элемента, и :nth-of-type -ը устанавливается на сам элемент.
:nth-last-of-type() -ը стилизует элементы с конца в порядке убывания.
p:nth-of-type(even) {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<div>Этот элемент не будет учитываться.</div>
<p>Этот элемент также не будет учитываться – 1-й пункт.</p>
<p>Будет учтен этот элемент – 2-й пункт.</p>
<span>Этот элемент также не будет учитываться.</span>
<p>Этот элемент также не будет учитываться – пункт 3.</p>
<p>Этот элемент будет учтен – пункт 4.</p>
</div>
</body>
</html>
:only-child
:only-child – стилизует элемент, если он единственный в своем родительском элементе.
p:only-child {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div>
<p>
Этот дочерний элемент будет учитываться, поскольку он единственный в родительском элементе.
</p>
</div>
</body>
</html>
:only-of-type
:only-of-type -стилизует только те дочерние элементы, которые являются единственными в родительском элементе своего типа.
main :only-of-type {
background-color: red;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div>Первый див.</div>
<p>Первое p, единственное в своем роде.</p>
<div>Второй дивизион</div>
<div>
Третий дивизион.
<i>Первое i, единственное в своем роде.</i>
<em>Первый эм.</em>
<em>Второй эм.</em>
</div>
</main>
</body>
</html>
:optional
:optional - предназначен для для тех, кто этого не делает required атрибут. Так что только он будет стилизован , которые не являются обязательными для заполнения.
input:optional {
background-color: lime;
}
input:required {
background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="/ru/handler.php/" data-trp-original-action="handler.php">
<p>Введите свое имя и возраст</p>
<p>Имя. <input name="name" required /></p>
<p>Возраст. <input type="number" min="18" name="տարեկան" /></p>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:read-only :read-write
:read-only :read-write -:read-only предназначен для полей, которые имеют readonly атрибут, который невозможно заполнить или изменить.
:read-write предназначен для полей, активных для заполнения или изменения.
input:read-only {
color: red;
}
input:read-write {
border: lime;
color: lime;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>:read-only</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="">
<p>
<input
type="text"
name="comment"
size="40"
value="Այս դաշտը չի կարող լրացվել։"
readonly
/>
</p>
<p>
<input
type="text"
name="comment01"
size="40"
value="Այս դաշտը կարող է լրացվել։"
/>
</p>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:root
:root - предназначен для основного элемента: <html>для
:root псевдокласы и html селектор эквивалентны. Если оба доступны :rootважнее html из селектора.
:root {
background-color: orange;
}
html {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form action="">
Имя: <input type="text" value="Ձեր անունը" /><br /><br />
Фамилия: <input type="text" value="Ձեր ազգանունը" /><br /><br />
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
</html>
:scope
:scope – в первую очередь зарезервировано для Javascript, где оно будет относиться к отдельному элементу.
В CSS это будет работать <style> элемента scoped вместе с атрибутом.
Если: :scope псевдокласс будет использоваться в качестве основного <style> элемент (который определяет <head> в ), то это эквивалентно :root псевдоклаз.
p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<article>
<section>
<h1 data-no-auto-translation="">էլեմենտը չի ոճավորվի։</h1>
<p>էլեմենտը չի ոճավորվի։</p>
</section>
<section>
<style scoped data-no-auto-translation="">
:scope {
font-style: italic;
}
</style>
<h1 data-no-auto-translation="">էլեմենտը կոճավորվի։</h1>
<p>էլեմենտը կոճավորվի։</p>
</section>
</article>
</body>
</html>
:target
:target – стилизовать все привязки веб-страницы (т. е.: «a… элементы» « <a data-no-auto-translation=""> ” բաժնի ” id-href ” մասում)։
div:target {
background: orange;
padding: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul>
<li><a href="#div01" data-no-auto-translation="">Առաջին մաս</a></li>
<li><a href="#div02" data-no-auto-translation="">Երկրորդ մաս</a></li>
</ul>
<div id="div01">
<h2 data-no-auto-translation="">Առաջին մաս</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla rutrum egestas hendrerit. Этиам ид ниси лектус. Maecenas vitae pharetra nibh
</p>
</div>
<div id="div02">
<h2 data-no-auto-translation="">Երկրորդ մաս</h2>
<p>
Aliquam ac tempus elit, ut fringilla Tellus. Curabitur egestas pulvinar magna ac dictum. Нуллам вел нисл либеро.
</p>
</div>
</body>
</html>
Псевдоэлементы и псевдоклассы, а также свойства CSS можно найти -moz-, -ms-, -webkit-, -o- префиксы. В настоящее время браузеры поддерживают все доступные функции, но для новых или экспериментальных функций желательно использовать их (вы можете проверить https://caniuse.com/ с веб-сайтом).
" -moz- " - предназначено только для браузера Firefox.
" -ms- » — предназначено для браузеров Internet Explorer и Edge.
" -webkit- " - предназначено для браузеров Chrome и Safari.
" -o- " - предназначено для браузера Opera.
В некоторых случаях необходимо использовать префиксы, чтобы данный браузер распознал определенное свойство.
Примеры,
/* Standard CSS */
.example {
/* Standard CSS properties */
background: linear-gradient(to right, #ff7e5f, #feb47b);
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
/* Vendor Prefixes */
.example {
/* Mozilla Firefox */
background: -moz-linear-gradient(to right, #ff7e5f, #feb47b);
/* Webkit (Chrome, Safari) */
background: -webkit-linear-gradient(to right, #ff7e5f, #feb47b);
/* Opera */
background: -o-linear-gradient(to right, #ff7e5f, #feb47b);
/* Internet Explorer */
background: -ms-linear-gradient(to right, #ff7e5f, #feb47b);
}
/* Full range of browser support for certain properties */
.example {
/* Standard property */
display: flex;
/* Mozilla Firefox */
display: -moz-flex;
/* Webkit (Chrome, Safari) */
display: -webkit-flex;
/* Opera */
display: -o-flex;
/* Internet Explorer */
display: -ms-flexbox;
}
/* Example of a transition property with prefixes */
.example {
/* Standard property */
transition: all 0.3s ease-in-out;
/* Mozilla Firefox */
-moz-transition: all 0.3s ease-in-out;
/* Webkit (Chrome, Safari) */
-webkit-transition: all 0.3s ease-in-out;
/* Opera */
-o-transition: all 0.3s ease-in-out;
/* Internet Explorer */
-ms-transition: all 0.3s ease-in-out;
}
Существуют определенные псевдоэлементы, которые используются только в браузерах Internet Explorer и Edge:
::-ms-browse – добавляет стиль кнопке выбора файла.
::-ms-check - добавляет стиль переключателям и птичьим ящикам.
::-ms-clear – придает стиль кнопке, удаляющей текст поля.
::-ms-expand – добавляет стиль кнопке, открывающей список.
::-ms-fill - передает стиль к индикатору.
::-ms-fill-lower ::-ms-fill-upper ::-ms-thumb ::-ms-ticks-after ::-ms-ticks-before ::-ms-tooltip ::-ms-track - передает стильrange"> чтобы
::-ms-reveal — добавляет стиль кнопке отображения пароля.
::-ms-value - передает стиль к элементам
:host :host() ::slotted
:host :host() ::slotted - предназначен для веб-компонентов.
Веб-компонент — это фрагмент HTML-кода, содержащий пользовательские элементы HTML, определенные с помощью Javascript. Он имеет свой собственный DOM ветвление называется Shadow DOM: Тень ДОМ.
DOM — это ветвление HTML-элементов, определенных на веб-странице, последовательность родительских и дочерних элементов.
DOM подготавливается браузером и на основе DOM последовательно отображает элементы HTML с их содержимым и стилем.
Shadow DOM, который относится к элементам веб-компонента, также создается браузером на основе кода Javascript, но он скрыт от нашего взгляда.
Мы не можем напрямую работать с элементами Shadow DOM, мы предполагаем, что -ում դրանց ոճ հաղորդել, կամ դրանց դիմել Javascript-ում։
Тень имеет тип DOM. <video> элемент. Определенный
Можем ли мы сказать: <video> HTML-элемент является основным DOMи веб-компонент shadow-DOMсвязь между
Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Shadow DOM Example</title>
<style data-no-auto-translation=""></style>
</head>
<body>
<template id="tmpl">
<style data-no-auto-translation="">
:host {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background: grey;
border: 5px solid red;
}
:host([centered]) {
width: 200px;
height: 200px;
background: green;
border: 3px solid orange;
}
::slotted(div) {
border: 2px solid blue;
margin-top: 10px;
}
</style>
<slot name="myExample"></slot>
<slot name="divSlot"></slot>
<slot name="centeredExample"></slot>
</template>
<script>
customElements.define(
"custom-dialog",
class extends HTMLElement {
connectedCallback() {
const tmpl = document.getElementById("tmpl");
this.attachShadow({ mode: "open" }).append(
tmpl.content.cloneNode(true)
);
}
}
);
</script>
<!-- Example 1: Regular custom dialog -->
<custom-dialog>
<span slot="myExample">Привет, мир!</span>
<div slot="divSlot">Привет, див!</div>
</custom-dialog>
<!-- Example 2: Centered custom dialog -->
<custom-dialog centered>
<span slot="centeredExample">Пример центрированного пользовательского диалога...</span>
<div slot="divSlot">Еще один див!</div>
</custom-dialog>
</body>
</html>
HTML-ядро <style> пусто, поскольку элементы веб-компонента не могут быть напрямую родительскими DOMпридать стиль от
-<script>…</script> –Новый элемент html определяется с помощью javascript: <custom-dialog> по имени. Это элемент, который будет ссылкой на HTML. основной между DOM и теневым DOM веб-компонента. Это называется " Հոսթ » элемент.
-<template>-определил отдельную часть html и связал ее с помощью javascript <custom-dialog>-в: в результате у нас будет веб-компонент со своим Shadow-DOM. не обрабатывается с основным html-кодом. он активируется только с помощью javascript.
-<template>из <style>-имеет определенный стиль, который будет применяться к элементам
-:host – стилизует элемент Host: <custom-dialog>-в
-:host([centered]) –устанавливает стиль для хоста, который имеет centered атрибут. В этом случае <custom-dialog centered >:
-::слот(дел) – стиль будет определять это <div> элементы, имеющие slot атрибут.
<slot> Элемент определяет место размещения содержимого DOM в Shadow-DOM. Несколько слотов определяются с помощью атрибута name.
<custom-dialog> — это элемент, определенный в JavaScript, который содержит содержимое, которое будет назначено слотам, определенным в Shadow-DOM.
slot Атрибут определяет слот, которому принадлежит содержимое данного элемента.
Веб-компоненты — это организованная, закрытая и часто используемая часть. Их готовят в определенных случаях:
- Определяет пользовательские элементы HTML, которые имеют свой собственный внешний вид и поведение.
- Это отдельная программная часть, которую можно использовать в разных частях сайта, даже в других проектах.
-Веб-компоненты могут взаимодействовать друг с другом для обеспечения необходимого поведения.
:picture-in-picture
:picture-in-picture – задает стиль полета видеообъектов.
Этот псевдокласс является пробной версией.
video {
width: 1000px;
}
video:picture-in-picture {
width: 600px;
border: 10px solid yellow;
box-shadow: 0 0 0 5px rgb(153, 153, 153);
}
<body>
<video src="2022 Ferrari SF90 Stradale.mp4" controls></video>
</body>
:placeholder-shown
:placeholder-shown - В отличие ::placeholder , он может стилизовать весь элемент, если он присутствует placeholder атрибут.
input:placeholder-shown {
color: red;
border-color: rgb(0, 255, 55);
background-color: yellow;
height: 50px;
}
<body>
<input type="text" placeholder="напиши мне..." />
</body>
:user-invalid :user-valid
:user-invalid :user-valid - элементы бывают разных типов: , и т. д. Если пользователь вводит неправильный контент (например, не упоминает символ «@» при заполнении адреса электронной почты), он будет активирован. :user-invalid -ի ոճը, и если оно совпадает, оно будет активировано :user-valid -ի ոճը.
Поддерживается только Firefox браузером.
#email-valid:user-valid {
border: 2px solid green;
}
#email-valid:user-valid + span::before {
content: "✓";
color: green;
}
#email-invalid:user-invalid {
border: 2px solid red;
}
#email-invalid:user-invalid + span::before {
content: "";
color: red;
}
<body>
<form action="">
<label for="email">Электронная почта *: </label>
<input id="email-valid" name="email" type="email" required />
<span></span>
<input type="hidden" name="trp-form-language" value="ru"/></form>
<form action="">
<label for="email">Электронная почта *: </label>
<input id="email-invalid" name="email" type="email" required />
<span></span>
<input type="hidden" name="trp-form-language" value="ru"/></form>
</body>
Russian 
Armenian