Можно ли иметь два разных style для одного стиля на одной странице?

@taras atavin · Регистрация: 24.11.2009

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

На странице два div, я хочу, чтоб в одном было

HTML5
1
2
3
<style>
p{text-align:justify; text-indent: 0px;}
</style>

, а в другом

HTML5
1
2
3
<style>
p{text-align:justify; text-indent: 20px;}
</style>

и чтоб оба работали, распространяясь на все <p></p> каждый своего div? Возможно ли это и как это сделать?

@Vladislav WebDev · 31.03.2014, 14:16

taras atavin, к сожаленю так сделать нельзя...

Шутка!

Вот так:

HTML5
1
2
3
4
5
6
<div>
  <p class="ind-20">some long text width indent</p>
</div>
<div>
  <p>some long text</p>
</div>

CSS
1
2
3
4
5
6
p {
  text-align:justify;
}
.ind-20 {
  text-indent: 20px;
}

@taras atavin · 31.03.2014, 14:41 **[ТС]**

А без класса ни как?

@Vladislav WebDev · 31.03.2014, 14:55

taras atavin, ну например так:

HTML5
1
2
3
4
5
6
<div>
    <p>some long text width indent < /p >
</ div>
<div>
    <p > some long text < /p >
</ div>

CSS
1
2
3
4
5
6
p {
    text-align : justify ;
}
div:first-child p {
    text-indent : 20px ;
}

А чем вас классы не устраивают?

@SF · 31.03.2014, 15:08

taras atavin,

CSS
1
2
div #one p{text-align:justify; text-indent: 0px;}
div #two p{text-align:justify; text-indent: 20px;}

@MathMath · 31.03.2014, 16:05

А без класса ни как?

Можно, если знаете все расположения элементов на странице, но не нужно, так как это не есть хорошо

Если так хочется, то почитайте спецификации семейства псевдоклассов nth-*:

nth-child
nth-last-child
nth-last-of-type
nth-of-type

@taras atavin · 31.03.2014, 18:00 **[ТС]**

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

Можно, если знаете все расположения элементов на странице,

Конечно знаю. Как?

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

так как это не есть хорошо

Почему?

Добавлено через 5 минут

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

div #one p{text-align:justify; text-indent: 0px;}
div #two p{text-align:justify; text-indent: 20px;}

Это в head? А как потом юзать?

Добавлено через 4 минуты

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

А чем вас классы не устраивают?

Тем, что тогда надо для каждого абзаца писать class=

@Vladislav WebDev · 31.03.2014, 18:05

Сообщение от taras atavin

Тем, что тогда надо для каждого абзаца писать class=

Пишите класс для одного дива тогда, проблем нет:

HTML5
1
2
3
4
5
6
7
8
<div>
    <p>some long text width indent </p>
</div>
<div class="ind-20">
    <p> some long text </p>
    <p> another some long text </p>
    <p> last very very some long text bla bla bla...</p>
</div>

CSS
1
2
3
4
5
6
p {
  text-align:justify;
}
.ind-20 {
  text-indent: 20px;
}

@MathMath · 31.03.2014, 18:07

Чисто теоретически, так как данной темой не увлекался. Принимаю факт наличия атрибута class как должное, если это необходимо.
Есть две ситуации (вы браузер):

Вам конкретно указали на элемент и сказали... (действие)
Вам указали на какой-то там 8-ой элемент в структуре и сказали... (действие)

В первом случае идем по DOM, в поисках элемента с классом, который нам указан, и делаем с ним... (действие).
Во втором - идем по DOM, вычисляем указанным элемент, так как мы не знаем что это за элемент и делаем с ним... (действие).

Относительно nth-* семейства: Представление

HTML5
1
2
3
4
5
6
<main class="main">
    <div><p>One</p></div>
    <div><p>Two</p></div>
    <div><p>Three</p></div>
    <div><p>Four</p></div>
</main>

CSS
1
2
3
4
5
6
7
8
9
10
11
.main {
    background: #f0f0f0;
}
 
.main div:nth-of-type(2) p {
    background: #fcfcfc;
}
 
.main div:nth-of-type(3) p {
    background: #ccc;
}

Тем, что тогда надо для каждого абзаца писать class=

Можно делать так:

HTML5
1
2
<div class="one"><p>1</p></div>
<div><p>2</p></div>

CSS
1
2
3
.one p {
    ...
}

@taras atavin · 31.03.2014, 18:09 **[ТС]**

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

Пишите класс для одного дива тогда, проблем нет:

не работает.

@Vladislav WebDev · 31.03.2014, 18:20

taras atavin, ну как не работает, если у меня работает?)))

Добавлено через 9 минут
taras atavin, ну и где не работает? http://jsbin.com/cewililu/1/

@SF · 31.03.2014, 19:24

taras atavin,

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Тег -P-</title>
    <style>
        div #one, #two {width:250px;height:300px;float:left;border:1px solid #ccc;padding:10px;}
        div #one p{text-align:justify; text-indent: 0px;}
        div #two p{text-align:justify; text-indent: 20px;}
    </style>
</head>
<body>
<div "wrapper">
    <div id="one"><!-- первая калонка -->
        <p>Рыба в веб-дизайне — временное наполнение макета страницы для имитации её законченного вида.</p>
        <p>У дизайнера не всегда есть под рукой материалы, которые планируется публиковать на веб-сайте</p>
    </div>
    <div id="two"><!-- вторая калонка -->
        <p>Рыба в веб-дизайне — временное наполнение макета страницы для имитации её законченного вида.</p>
        <p>У дизайнера не всегда есть под рукой материалы, которые планируется публиковать на веб-сайте</p>
    </div>
</div>
</body>
</html>

@Vladislav WebDev · 31.03.2014, 19:28

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

Ужос, как в принципе и всё остальное))

@SF · 31.03.2014, 20:23

Suby, что вы хотите от меня? я же не вам ответил!
здесь кроме CSS не важно что там написано я показываю конечный результат.

CSS
1
2
        div #one p{text-align:justify; text-indent: 0px;}
        div #two p{text-align:justify; text-indent: 20px;}

HTML5
1
<div "wrapper"> = <div id="wrapper"> or <div>

@Vladislav WebDev · 31.03.2014, 20:37

isco_kg, воу воу, расслабтесь, я от вас ничего не хочу.

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

CSS
1
2
div #one p{text-align:justify; text-indent: 0px;}
div #two p{text-align:justify; text-indent: 20px;}

хотя это реально ужос))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@taras atavin 4226 / 1796 / 211 Регистрация: 24.11.2009 Сообщений: 27,562
	31.03.2014, 14:41 [ТС]
	А без класса ни как? 0

@Vladislav WebDev 327 / 217 / 97 Регистрация: 04.11.2012 Сообщений: 638
	31.03.2014, 18:20
	taras atavin, ну как не работает, если у меня работает?))) Добавлено через 9 минут taras atavin, ну и где не работает? http://jsbin.com/cewililu/1/ 0

Можно ли иметь два разных style для одного стиля на одной странице?

Решение