#modal-container.block.image?

@Kerduk · Регистрация: 24.04.2018

Author24 — интернет-сервис помощи студентам

CSS

#modal-container.block.image
background: red;
margin: auto;
padding: auto;

Что означает #modal-container.block.image?
Пожалуйста только можно подробно, я совсем запутался)))
Это перечисление идентификаторов и классов которым задаются данные стили?

@gogolik · 09.11.2018, 06:26

#modal-container - id блока.
.block и .image - классы этого блока.

@Kerduk · 12.11.2018, 14:39 **[ТС]**

Когда идет перечисление классов в одну строку к которым применяются одни и те же свойства, разве не ставят запятую?
Почему в первом примере нет запятых?

Например:

CSS

.block1,
.block2,
.block3{
color: red;
padding: 0px;
margin: 0px;
 
}

@Jewbacabra · 12.11.2018, 14:47

Kerduk, ","означает "или", слитное написание "и", пробел вложенность.

@Kerduk · 13.11.2018, 13:35 **[ТС]**

","означает "или", слитное написание "и", пробел вложенность.

Запятая означает или слитное написание и??

Не понял.
Что вы несете)))?

@gogolik · 13.11.2018, 14:16

Kerduk, это вы не поняли.
Запятая означает "или". Пример:
.class1, .class2 = class1 ИЛИ class2.
Пробел означает вложенность элемента. Пример:
.class1 .class2 = class2 должен быть потомком class1, чтобы свойство применилось.
Слитное написание означает, что классы должны быть указаны вместе. Пример:
.class1.class2 = свойство применяется только тогда, когда указаны оба класса.

@Qwerty_Wasd · 14.11.2018, 01:26

gogolik, приветствую

запятая это не ИЛИ. Через запятую просто перечисляются селекторы для которых применятся стили. Так что это именно И.

CSS

.block1,
.block2,
.block3{
color: red;
}

Красный цвет текста станет и у .block1, и у .block2, и у .block3.

@gogolik · 14.11.2018, 07:44

Qwerty_Wasd, приветствую.

Спасибо за замечание. Но можно же трактовать как «элемент имеет класс блок1 или блок 2». У меня такая логика)))

@Qwerty_Wasd · 14.11.2018, 08:15

gogolik,

Сообщение от gogolik

Но можно же трактовать как «элемент имеет класс блок1 или блок 2». У меня такая логика)))

ну... если Вам так удобнее, переубеждать Вас не буду

И все же Я хотел бы попросить Вас не навязывать ТСу эту мысль - она может сбить с толку, или ввести в заблуждение.

Запятая в СSS формирует группу - https://www.w3.org/TR/2018/REC... /#grouping

@gogolik · 14.11.2018, 08:25

Qwerty_Wasd,

@Kerduk · 24.11.2018, 16:13 **[ТС]**

запятая это не ИЛИ. Через запятую просто перечисляются селекторы для которых применятся стили. Так что это именно И.

CSS

 
.block1,
.block2,
.block3{
color: red;
}

Красный цвет текста станет и у .block1, и у .block2, и у .block3.

Значит слитное написание классов и идентификаторов, пример=> (#block1.block2.block3)
это аналогично запятой между классами? пример=> (.block1, .block2, .block3)

@Qwerty_Wasd · 24.11.2018, 16:26

Kerduk,

Сообщение от Kerduk

аналог запятой между классами

нет.
Это

Сообщение от Kerduk

#block1.block2.block3

значит, что стили применятся к элементам, у которых одновременно имеется и id="block1" и class="block2 block3".
То есть при такой разметке

HTML5

1 2	<div id="block1" class="block2 block3"></div> <div class="block2 block3"></div>

#block1.block2.block3 сработает только для первого див.
Пруфик - https://jsfiddle.net/Qwerty_Wasd/ptv72Lha/

CSS

/*общие стили для обоих дивов*/
div {
    height: 100px;
    width: 100px;
    background: black;
    margin: 10px;
}
/*этот стиль применится только к первому*/
#block1.block2.block3 {
    background: red;
}

Добавлено через 3 минуты
второй пруфик - https://jsfiddle.net/Qwerty_Wasd/cktu89L4/
этот набор селекторов #block1.block2.block3 есть у обоих.
Значит стили применятся для обоих.

HTML5

1 2	<div id="block1" class="block2 block3"></div> <div id="block1" class="block2 block3 block4"></div>

CSS

div {
    height: 100px;
    width: 100px;
    background: black;
    margin: 10px;
}
 
#block1.block2.block3 {
    background: red;
}

@Kerduk · 24.11.2018, 16:36 **[ТС]**

Спасибо.

Но зачем некоторые так делают?
Когда можно, просто по классам дать свойство и все.

Что это дает?

@Qwerty_Wasd · 24.11.2018, 16:53

Kerduk, в большом проекте, версталы бывают сменяют друг друга. Причин много, кто-то перегорел ушел, взяли другого. Нужно сменить вид меню, он видит набор идентификаторов, находит в таблице стилей, меняет и тут у него меняется стиль еще у каких-то элементов\блоков\модулей. Верстка едет. Он в шоке. Откатил. Назначил свой класс или выбрал несколько, чтобы не париться и не разбираться в чужом коде. Прицепил ему стили. Все норм. Нужно назначить обработчик на элемент. Добавляется класс с приставкой js-блабла. Прицепил. Все норм. Проходит время - он ушел. Любая причина. Приходит новый - и все то что я описал, повторяется.
Поэтому придя в большой проект, не факт конечно, но есть вариант, что Вы увидите нечто подобное

HTML5

<body id="yDmH0d" jscontroller="pjICDe" jsaction="rcuQ6b:npT2md;click:FAbpgf;c0v8t:.CLIENT;LhiQec:.CLIENT;wINJic:.CLIENT;keydown:.CLIENT;keyup:.CLIENT;keypress:.CLIENT;xixHIb:.CLIENT;pWoaS:.CLIENT;GvneHb:.CLIENT;qako4e:.CLIENT" class="tQj5Y ghyPEc IqBfM ecJEib EWZcud EIlDfe cjGgHb d8Etdd LcUz9d" style="bottom: auto; right: auto; width: auto; height: 100%; min-height: 369px;">

Добавлено через 3 минуты
Или еще круче -

HTML5

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" class="m-locale_ru feature-new-typefilter-tabs feature-save-to-disk-button feature-new-themes feature-react-statusline feature-moved-compose-button feature-loading-bar feature-yandex-plus feature-web_ads feature-web_adloader_with_cookie_cache feature-actions feature-web_ads_mute feature-email_classification feature-without-welcome-wizard notranslate mail-Page mail-Page_3pane-horizontal js-page blobconstructor blob-constructor geolocation filereader cssgradients supports cssanimations borderimage csstransforms csstransforms3d csstransitions classlist no-highresdisplay no-is-pdd draganddrop draganddrop-files input-multiple classlist-second-arg no-msie webkit no-opera no-mozilla no-edge no-ie9 no-ie10 no-ie11 no-ielt11 no-ios no-mac new-theme moved-compose-button loading-bar theme-tanks m-skin-1 with-dark-page with-dark-aside m-loaded mail-Page_with_Todo" id="nb-1" data-nb="nb-0">

@gogolik Модератор 2823 / 1872 / 805 Регистрация: 13.03.2010 Сообщений: 6,114
	09.11.2018, 06:26	2
	#modal-container - id блока. .block и .image - классы этого блока. 0

@Jewbacabra 4925 / 3920 / 1620 Регистрация: 24.04.2014 Сообщений: 11,441
	12.11.2018, 14:47	4
	Kerduk, ","означает "или", слитное написание "и", пробел вложенность. 0

@Kerduk 23 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 411
	13.11.2018, 13:35 [ТС]	5
	","означает "или", слитное написание "и", пробел вложенность. Запятая означает или слитное написание и?? Не понял. Что вы несете)))? 0

@gogolik Модератор 2823 / 1872 / 805 Регистрация: 13.03.2010 Сообщений: 6,114
	13.11.2018, 14:16	6
	Kerduk, это вы не поняли. Запятая означает "или". Пример: .class1, .class2 = class1 ИЛИ class2. Пробел означает вложенность элемента. Пример: .class1 .class2 = class2 должен быть потомком class1, чтобы свойство применилось. Слитное написание означает, что классы должны быть указаны вместе. Пример: .class1.class2 = свойство применяется только тогда, когда указаны оба класса. 0

@gogolik Модератор 2823 / 1872 / 805 Регистрация: 13.03.2010 Сообщений: 6,114
	14.11.2018, 07:44	8
	Qwerty_Wasd, приветствую. Спасибо за замечание. Но можно же трактовать как «элемент имеет класс блок1 или блок 2». У меня такая логика))) 0

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	14.11.2018, 08:15	9
	gogolik, Сообщение от gogolik Но можно же трактовать как «элемент имеет класс блок1 или блок 2». У меня такая логика))) ну... если Вам так удобнее, переубеждать Вас не буду И все же Я хотел бы попросить Вас не навязывать ТСу эту мысль - она может сбить с толку, или ввести в заблуждение. Запятая в СSS формирует группу - https://www.w3.org/TR/2018/REC... /#grouping 1

@gogolik Модератор 2823 / 1872 / 805 Регистрация: 13.03.2010 Сообщений: 6,114
	14.11.2018, 08:25	10
	Qwerty_Wasd, 1

@Kerduk 23 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 411
	24.11.2018, 16:36 [ТС]	13
	Спасибо. Но зачем некоторые так делают? Когда можно, просто по классам дать свойство и все. Что это дает? 0