сделать текст выбранным внутри невыбираемого div

На моей странице я сделал весь div unselectable, с помощью этого CSS (который я получил из stackoverflow it self)

    .unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Теперь у меня есть тег h2 внутри этого невыбираемого div. И я хочу, чтобы h2 стал selectable.Is там любой способ достичь этого легко.

Я забыл кое-что в своем вопросе. я получил три h2 в моем коде, и мне нужен конкретный, который можно выбрать, поэтому я добавил класс к этому h2 и попробовал что-то вроде этого .unselectable: not (.class-of-h2) (который я получил из ниже ответов). но не работает

10
nl ja de

3 ответы

Используйте для своего элемента h2

.unselectable h2{
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

Смотрите демонстрацию

21
добавлено
Я не знаю, является ли это правильным ответом или нет, но эта вещь определенно сработала для меня.
добавлено автор Athul, источник
Да, кажется, что вы можете переопределить параметр родительского элемента именно таким образом. Страница MDN на user-select несколько обманчива: обычно none позволяет переопределять во внутренних элементах, но Firefox имеет другую настройку: none не допускает переопределения, -moz-none .
добавлено автор Jukka K. Korpela, источник

Just add the below CSS

.unselectable h2 {
   -moz-user-select: text;
   -khtml-user-select: auto;
   -webkit-user-select: auto ;
   -ms-user-select: auto;
   user-select: auto;
 }

See the demo

2
добавлено

вы можете использовать

     .unselectable:not(h2:nth-child(2)) {
      //your data
      } 

not can exclude the element from your list of selector
this can make your whole div unselectable except h2 element.

1
добавлено
: Я забыл кое-что в своем вопросе. я получил три h2 в моем коде, и мне нужен конкретный, который можно выбрать, поэтому я добавил класс к этому h2 и попробовал что-то вроде этого .unselectable: not (.class-of-h2). Но его не работает
добавлено автор Athul, источник
вы можете использовать .unselectable: not (h2: nth-child (2)) что-то вроде этого ..
добавлено автор sourcecode, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)