<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Название продукта</span>
<span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг:
<span itemprop="ratingValue">4.5</span> из
<span itemprop="bestRating">5</span>
на основе
<span itemprop="ratingCount">10</span> оценок
</span>
</div>
<article itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline">Заголовок статьи</h1>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
Рейтинг:
<span itemprop="ratingValue">4.5</span> из
<span itemprop="bestRating">5</span>
на основе
<span itemprop="ratingCount">10</span> оценок
</div>
</header>
<div itemprop="articleBody">
<!-- Текст статьи -->
</div>
</article>
<html>
<head>
<title>Название страницы</title>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Название продукта",
"image": "https://example.com/product-image.jpg",
"description": "Описание продукта",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"bestRating": "5",
"ratingCount": "10"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "19.99",
"availability": "http://schema.org/InStock"
}
}
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
<html>
<head>
<title>Название страницы</title>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "CreativeWork",
"name": "Название статьи",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"bestRating": "5",
"ratingCount": "10"
}
}
</script>
</head>
<body>
<!-- Содержимое страницы -->
</body>
</html>
.vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
/* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
/* Стили для первой кнопки при наведении на вторую */
}
:not
из-за того, что наличие класса .blue - единственное различие между кнопками.vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
/* Стили для последней кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
/* Стили для первой кнопки при наведении на последнюю */
}
.vskrytiye__ot:has(.first-btn:hover) .second-btn {
/* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.second-btn:hover) .first-btn {
/* Стили для первой кнопки при наведении на вторую */
}
const openPops = document.querySelectorAll('.open__popup');
const closePop = document.querySelector('.popup__close');
const popUps = document.querySelectorAll('.popup');
openPops.forEach((openPop, index) => {
openPop.addEventListener('click', function (e) {
e.preventDefault();
popUps[index].classList.add('active');
});
});
closePop.addEventListener('click', () => {
popUps.forEach(popUp => {
popUp.classList.remove('active');
});
});
класс1 И класс2
— чтобы непременно оба были в наличии у элемента, и тогда только его брать;класс1 ИЛИ класс2
— достаточно любого одного из двух, ну или оба, вообще супер.document.querySelector('.popup__close.popup__area'); // без пробела
document.querySelector('.popup__close, .popup__area'); // через запятую
querySelector()
выбирает первый подходящий найденный элемент. Один.querySelectorAll()
выберет все подходящие. npm install --legacy-peer-deps