Safeguard a DIV from being selected

Within my container div, there is a slideshow element that can be clicked. However, I noticed that when double clicking on the next or previous button, some tags following the slideshow element become highlighted. I attempted to prevent this by disabling the selection in the next div, but then the double click function would just select the next div instead.

I have tried using the following CSS:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Unfortunately, this solution did not work for me because I only want to protect the child elements of a specific div from being selected with a double click from another div. Is there a way to achieve this while preserving the ability to select other elements within the div?

htmlcss

Answer №1

To target all descendants within a div, follow these steps:

div * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

However, there may be speed issues with this approach, particularly in a production environment. It is recommended to adjust your HTML code and specifically target the direct descendants of the div.

div h1,
div p,
div span/*, etc. */ {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

If you need to override the default inheritance of user-select: none for the children of the div, you can individually set user-select: text for each element (making sure to include compatibility declarations for various browsers).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to adjust the size of an HTML paragraph tag

I'm currently involved in working on an HTML/JS application that is similar to PowerPoint. This application allows users to create slides and display them on screens of various sizes (such as a screen with dimensions of 128x90 pixels or 2x1 meters). ...

htmlcss

Swapping out an image using CSS

Previously, the most common method for "removing" text from elements was through text-indent: -9999px, however, it is now recommended to use text-indent: 100%; white-space: nowrap; overflow: hidden; This way, the browser does not need to create a huge 9 ...

cssoverflowfont-sizetext-indent

CSS techniques for arranging images with varying sizes into a tiled layout

I have a collection of images that I want to arrange in a tiled layout, similar to the one shown in this image. These images consist of 3 photos with identical width and height, except for one which is larger and should occupy double the space compared to ...

csshtml

Having trouble populating two linked html dropdowns with JSON data using jQuery?

My attempt to populate two HTML selects with JSON data is resulting in an error: Uncaught TypeError: country.map is not a function when trying to populate the cities. Can anyone point out the issue with the code? $(document).ready(function() { let $co ...

javascripthtmljqueryjson

Paper-dropdown-menu component failing to render properly in web browser

Encountering an issue with the rendered HTML for a basic paper-dropdown-menu. Instead of displaying as a styled menu, the list items are just appearing as a plain list on the page. Upon clicking the rendered paper-input component within the dropdown, the ...

htmlangularpolymer

Fast method or tool for generating a detailed CSS element list from deeply nested elements

I have been using Chrome dev tools to work on a code base that was not created by me. There are numerous deeply nested elements scattered throughout the code. I find myself having to manually search through the HTML structure in order to select them with ...

htmlcssgoogle-chrome-devtools

Shifting the background image as we reach its limit

I'm creating a website for my company, but I struggle with HTML. One feature I want is to have a background image that stays static while reading the site, but then follows the user when they reach the end of the image. I know how to make an image f ...

htmlbackground

Maximizing values entered into form fields

Looking for a way to extract the highest number from a set of input fields in an HTML form using JavaScript? Take this example: <input id="temp_<strong>0</strong>__Amount" name="temp[<strong>0</strong>].Amount" type="text" valu ...

javascriptjqueryhtml

Avoiding a line break between two <form> tags is essential for maintaining the structure of your webpage

I am looking for a way to ensure that there are no line breaks between two forms that I have on my website. Here is the code snippet: <form action="..."> <input type="submit" /> </form> LINE BREAK HERE <form action="..."> <inpu ...

htmlcss

Creating an HTML form in Django using forms.py

I created a Django web application that includes an authentication system. Within this system, I have a user registration view, a customer model, and a UserCreationForm in forms.py: class CustomerSignUpForm(UserCreationForm): first_name = forms.CharFie ...

htmldjangoauthenticationdjango-modelsdjango-forms

Unique float structure within a division of divs

Can divs be floated within another div like this? Here is the code: <div class="event_month"> <div class="event1">1</div> <div class="event2">2</div> <div class="event3">3</div> <div class="event4">4</di ...

css

Passing PHP values to JQuery is a common practice in web

I have a PHP file named userAuthentication.php containing a function that returns either "true" for successful authentication or "false" for a failure. In addition, I have a login view called login.html which includes fields for inputting username and pas ...

phpjqueryhtml

Filter a list generated in real-time according to both the unique identifier and the text entered in a search box

WORKING $(document).ready(function() { $("#submit").click(function() { $.ajax({ url : "/vmstatus/", type : "POST", dataType: "json", ...

javascriptjqueryhtmlajax

Choose an image to display as the background image within a div

I'm developing an online poster creator and I could use some guidance on how to set an image as the background of a div element. I'm a bit lost on where to begin. Currently, I have a div containing a selection of images and an empty div with jus ...

javascriptjqueryhtmlcssjquery-ui

Generate HTML content using AngularJS

Is there a way to format a string as HTML when using it in the following syntax: <div> {{ text }} </div> Instead of displaying the actual HTML, only the text is shown - for example " ab " ...

javascripthtmlangularjshtml-rendering

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

Determine the number of rows that are currently visible within an HTML table by

Is there a way to get the total number of visible rows in an HTML table using JavaScript? I have a code snippet that filters table rows as I type, but I would like to automatically display the count of visible rows in an innerHTML element. I tried adding ...

javascripthtmlarrays

cannot establish a connection between details.html and index.html in Django

index.html {% for item in item_list%} <ul> <li> <a href="/foodmenu/{{item.id}}">{{item.id}} -- {{item.item_name}}</a> </li> </ul> {% endfor %} detail.html <h1> ...

pythonhtmldjangodatabase

Issues with jQuery .on('click') arise when employing absolute positioning

I am currently working on a website project where I have implemented a popup element with a dark backdrop. However, the issue I am facing is that when clicking within the popup itself, it also triggers the fade-out effect instead of just when clicking on t ...

jqueryhtmlcss

Removing Borders from HTML Tables

I am struggling to eliminate the border of a table within a gridview. The table is located inside the itemtemplate, and I can't figure out how to remove the border. Can someone please assist me with this? Thank you. Shown below is the code I am worki ...

htmlasp.net