Как сделать плюс в css
30 CSS селекторов, которые вы должны знать
Приветствую, друзья, сегодня я покажу 30 CSS селекторов, которые должен знать каждый верстальщик и веб-разработчик. Не важно, если вы только ознакомились с основными CSS селекторами в виде классов и id, или вы уже некоторые время работаете, эта статья поможет всем. Новичкам она поможет разобраться в вопросе лучше. Опытным же разработчикам поможет оптимизировать код, и ускорить процесс верстки в будущем.
Как всегда, я уже подготовил видео к этой статье, советую посмотреть его. В видео я подробнее рассказываю о 30 CSS селекторах. Так же в видео я покажу на примерах как работает тот или иной селектор. Эту же статью я рекомендую использовать больше как шпаргалку к видео и последующей работы. Давайте начинать!
Видео о 30 CSS селекторах, которые вы должны знать
CSS селектор *
Данный селектор выбирает все элементы на странице. Часто его используют в самом начале документа для указания свойства box-sizing: border box для всех элементов. Но вы можете указывать любые свойства. Я в примере ниже указал цвет текста. Он применится для всех элементов на странице.
CSS селектор # / #element
Скорее всего вы уже знакомы с селектором id. Это один из самых базовых селекторов. Однако, я советую избегать использования данного селектора для стилизации. ID селектор более функционален для использования из JavaScript. В CSS же он только вносит дополнительную сложность, если вы все элементы стилизуете через классы, а некоторые через id. Так же особенность id это то, что id должен быть уникален, и с помощью него можно выбрать только 1 элемент на странице.
CSS селектор . / .element
Это так же базовый и самый часто используемый селектор. В отличие от id он не должен быть уникален и может использоваться для выбора нескольких элементов на странице. С помощью него стилизуют почти все элементы на странице.
CSS селектор element element (контекстный)
С помощью данного селектора можно выбрать элементы, которые соответствуют заданному контексту. Здесь вы можете передавать другие селекторы, например, классы, ID или название тегов. Давайте рассмотрим такие примеры:
Так же мы можем задавать свойства по условию. Например, сменить цвет элементу, если он имеет указанный класс.
CSS селектор element (селектор по типу)
Данный селектор помогает выбрать все элементы с указанным типом на странице. Например, мы можем выбрать все ссылки или списки.
CSS селектор a:visited и a:link
С помощью css селектора a:link мы можем выбрать все ссылки, на которые пользователь еще не нажал. С помощью же селектора a:visited мы сможем выбрать те ссылки, по которым пользователь уже переходил. Так же вы можете комбинировать селекторы между собой. Например, стилизовать ссылки с заданным классом, по которых пользователь уже переходил.
CSS селектор + / element + element
Позволяет выбрать элемент, который идет сразу же после указанного элемента.
CSS селектор > / element > element
Позволяет выбрать только тот элемент, который является прямым потомком указанного элемента. Давайте рассмотрим такой код с комментариями.
CSS селектор
Данный селектор похож на селектор +. Только в отличие от него, он выберет не первый элемент после указанного, а все указанны элементы, расположенные на том же уровне вложенности.
CSS селектор [attribute] / element[attribute]
Это селектор атрибутов. Он выберет все элементы, у которых присутствует указанный атрибут.
CSS селектор [attribule=»value»] / element[attribule=»value»]
Данный селектор выбирает те элементы, у которых указан заданный атрибут с заданным значением. Особенностью данного селектора является его строгость. Если ссылка будет хоть немного отличатся, например будет указанно http://google.com или google.com, то селектор не сработает.
CSS селектор [attribute*=»value»] / element[attribute*=»value»]
Данный селектор очень похож на предыдущий, однако он является более гибким. Здесь мы указываем то значение, которое должно быть хотя бы частью искомого атрибута. Однако важно помнить, что он слишком обширен. Например, код ниже так же выберет домен, например, ex-google.com, так как в нем есть наша искомая часть.
CSS селектор [attribute^=»value»] / element[attribute^=»value»]
Данный селектор ищет элементы, у которых начало значения атрибутов соответствую заданному началу строки.
CSS селектор [attribute$=»value»] / element[attribute$=»value»]
Данный атрибут очень сильно похож на предыдущий, однако он ищет не по началу строки, а по концу.
CSS селектор [data-*=»value»] / element[data-*=»value»]
Данный селектор помогает выбрать элементы в зависимости от значения data атрибута. Давайте в примере ниже выберем все ссылки, которые ведут на внешний источник.
CSS селектор [data-
Данный селектор похож на предыдущий, но добавляет некоторую гибкость. С помощью него мы можем выбрать атрибут, у которого есть значения, разделенные пробелом. Теперь давайте выберем ссылки на внешнее изображение.
Теперь мы можем выбрать данную ссылку двумя способами.
CSS селектор :checked / element:checked
Как видно из названия, данный селектор выбирает только отмеченные/выбранные чекбоксы и радио кнопки. В примере ниже мы объединим несколько уже пройденных селекторов. Мы будем красить label, в зависимости от состояния чекбокса.
CSS селекторы ::before и ::after
Тут мы получаем псевдоклассы определенного элемента. Они позволяют нам добавить контент вокруг данного элемента. В примере ниже мы добавим красную точку после элемента с классом block.
CSS селектор :hover / element:hover
Тоже очень часто используемый селектор. Позволяет присваивать стили при наведении на элемент.
CSS селектор :not(selector) / element:not(selector)
Псевдокласс отрицания может быть очень полезен, если вам нужно выбрать все элементы кроме тех, которые соответствую указанному условию.
CSS селектор ::pseudoElement / element::pseudoElement
Мы можем использовать данный селектор для стилизации определенной части элемента. Ниже я приведу более детальное описание с примерами, так как их есть несколько.
Как выбирать первую строчку параграфа
Как выбрать первую букву параграфа
CSS селектор :nth-child(n) / element:nth-child(n)
Помогает выбрать элемент в зависимости от его позиции на данном уровне вложенности.
CSS селектор :nth-last-child(n) / element:nth-last-child(n)
Позволяет выбрать определенный элемент с конца.
CSS селектор :nth-of-type(n) / element:nth-of-type(n )
Очень похож на селектор :nth-child, однако он работает не для всех дочерних элементов, а только для тех, которые соответствуют типу. Важной особенностью является то, что считает он так же только элементы с нужным типом.
CSS селектор :nth-last-of-type(n) / element:nth-last-of-type(n)
Работает как селектор выше, но начинает считать с конца.
CSS селектор :first-child / element:first-child
Этот псевдокласс выбирает первый дочерний элемент.
CSS селектор :last-child / element:last-child
Этот псевдокласс выбирает последний дочерний элемент.
CSS селектор :only-child / element:only-child
Откровенно говоря, вы вря дли будете хоть сколько-нибудь часто использовать данный селектор. Он позволяет выбрать элемент, если он единственный дочерний элемент другого элемента.
CSS селектор :only-of-type / element:only-of-type
Позволяет выбрать элемент, если он единственный элемент заданного типа у родителя.
CSS селектор :first-of-type / element:first-of-type
Выбирает первый элемент указанного типа. Нумерация начинается только с нужного типа элемента.
Спасибо, что прочитали! Если у вас остались вопросы, задавайте их в комментариях на YouTube или в нашем Telegram чате.
Так же советую ознакомиться с другими моими статьями:
Make plus symbol in CSS [duplicate]
I have the below CSS code which gives the + symbol but not matches the design basically it needs to be thin. See snippet and codpen
Should Look like the below symbol: 
Any other styling is also fine for me but should look like the snapshot.
4 Answers 4
We can achieve this using one gradient like below:
Old answer
Use multiple background like below:
And here is with transparency:
We can add CSS variable to easily control the overal shape:
I would recommend working with before and after pseudo elements to achieve this.
Basically I used the div as black background only, used the before element as vertical line and the after element as horizontal line.
You could do this by using the content property of CSS:
Here’s a Fiddle showing the above code.
I’d also advise using the actual symbol:
Then just change the font-size for size, and if it’s not thin enough for you then you can change the font family to a narrower one.
Edit: @Temani-Afif’s solution is more diverse. I’d recommend his over mine, depending on your compatibility needs: Make plus symbol in CSS
Сделать символ плюса в CSS
Символ должен выглядеть так :
Любой другой стиль мне тоже подходит, но лучше сделать как на снимке.
6 ответов 6
А вот вариант с прозрачностью:
Мы можем добавить переменную CSS, чтобы легко контролировать общую форму:
Можно добавить и любую анимацию по первому же требованию. Например, немного так поэкспериментировать:
Или совсем не экспериментировать:
А почему бы не сделать всё на CSS переменных? 😀
Добавлю вариант на псевдо-элементах, где «плюс» имеет свою таргет зону.
SVG Морфинг символа плюс
Реализуется с помощью изменения атрибута d path нарисованного в векторном редакторе символа плюс
Переключения форм плюса на минус и обратно при кликах по холсту svg
Пример морфинга из символа плюс в букву
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html css вёрстка svg или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.16.41042
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Создаем геометрические фигуры с помощью CSS
Что вам понадобится для использования данного руководства
Скачать исходные файлы
Просмотреть демонстрацию
Окружность
Квадрат
Прямоугольник
CSS
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :
Треугольник
Треугольник, направленный вниз
CSS
Создавая перевернутый треугольник, оперируем толщиной границы:
Треугольник, направленный влево
HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :
CSS
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:
Треугольник, направленный вправо
HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :
CSS
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:
HTML
Для создания фигуры « ромб », создаем div с ID diamond :
Трапеция
CSS
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:
Параллелограмм
HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :
CSS
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:
Звезда
HTML
Для создания фигуры « звезда », создаем div с ID равным star :
Звезда (6ти конечная)
HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :
Пятиугольник
HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :
CSS
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:
Шестиугольник
HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :
CSS
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:
Восьмиугольник
HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :
CSS
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:
Сердце
HTML
Для создания фигуры « сердце », создаем div с ID heart :
CSS
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:
HTML
Для создания фигуры « яйцо », создаем div с ID egg :
Бесконечность
HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:
CSS
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:
Бабл для комментария
HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :
Pacman
HTML
Для создания фигуры « pacman », создаем div с ID pacman :
CSS
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:
Заключение
Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.
Вадим Дворников автор-переводчик статьи « Make Shapes with CSS: How to Create Different Shapes in CSS »
Скопирована с хаба
Добрый день.
Вы можете подсказать как нарисовать в css такой круг?
Генератор треугольников, если кому интересно:
Вот тут я подробно написал по какому принципу выполнить звезду.
Ну и нулевую высоту имеет смысл указывать только если в блоке предполагается содержимое. Если мы зададим нулевую высоту, то содержимое не будет растягивать блок.
Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.
А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?
What does the «+» (plus sign) CSS selector mean?
13 Answers 13
In this case, the selector means that the style applies only to paragraphs directly following another paragraph.
A plain p selector would apply the style to every paragraph in the page.
This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.
It’s the Adjacent sibling selector.
To define a CSS adjacent selector, the plus sign is used.
The above CSS code will format the first paragraph after (not inside) any h1 headings as blue.
h1>p selects any p element that is a direct (first generation) child (inside) of an h1 element.
h1+p will select the first p element that is a sibling (at the same level of the dom) as an h1 element.
, but would it also match that same
? Or is it only after?
but point understood.
The + sign means select an «adjacent sibling»
For example, this style will apply from the second
Example
See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/ (Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)
Browser Support
Adjacent sibling selectors are supported in all modern browsers.
Learn more
«+» is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
It can be thought of as a looking outside selector which checks for the immediately following element.
Here is a sample snippet to make things more clear:
Since we are one the same topic, it is worth mentioning another selector,
selector, which is General Sibling Selector
p selects all the p which follows the p doesn’t matter where it is, but both p should be having the same parent.
Here is how it looks like with the same markup:
Notice that the last p is also matched in this sample.