How to Deselect with CSS

How to deselect with CSS?

Use CSS3's :not() selector (which has an equivalent jQuery selector):

img:not(#thisone) {
}

If you need better browser support, there's always the fact that ID selectors, being the most specific simple selectors, are good for overrides:

img {
    /* All images */
}

#thisone {
    /* Revert styles for this particular image */
}

How to make certain text not selectable with CSS

The CSS below stops users from being able to select text.

-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

To target IE9 downwards the html attribute unselectable must be used instead:

<p unselectable="on">Test Text</p>

How to deselect a highlighted list item with CSS/Javascript?

Remove the onclick="xxx" from your code and add onclick="selectMe(this)" on every "li" like this:

<div class="explore" id="explore">
  <div class="explore_body">
    <h4 style="text-align: center; margin-bottom: -10px; ">explore by theme:</h4>
    <ul id="nav">
      <li onclick="selectMe(this)"><a href="#!"><img src="images/air_pollution.png" /></a><a href="#!" class="album_title">Air pollution and air quality</a></li>
      <li onclick="selectMe(this)"><a href="#!"><img src="images/biodiversity.png"/></a><a href="#!" class="album_title">Biodiversity</a></li>
      <li onclick="selectMe(this)"><a href="#!"><img src="images/chemicals_and_wastes.png"/></a><a href="#!" class="album_title">Chemicals and waste</a></li>
    </ul>
  </div>
</div>

Then in your JavaScript you will add the selectMe() method that first deselects all "LI" elements in UL with ID="nav" and then selects the one LI that was clicked upon:

function selectMe(el) {
  var lis = document.getElementById("nav").getElementsByTagName("li");
  for (i = 0; i < lis.length; i++) {
    lis[i].classList.remove('active')
  }
  el.classList.add('active');
}

Here is a working example

How can i create an image to select and deselect using css

<!DOCTYPE html><html><head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><style>  i{color:#000;font-size:30px!important}  .blueColor{color:#118de8}</style><script>$(document).ready(function(){    $("i").click(function(){        $(this).toggleClass("blueColor");    });});</script></head><body>
<i class="fa fa-chain-broken" aria-hidden="true"></i>
</body></html>

How to deselect a close icon button in Html

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

 <div class="modal-content">
   <span class="close unselectable">×</span>
   <p>Some text in the Modal..</p>
</div>

Select element but deselect specified child of element

You want to use the Element::ownText method.

String html = "<div>\n" + //
        "<p><strong>Location: </strong> Earth</p>\n" + //
        "</div>";

Document doc = Jsoup.parse(html);
Element p = doc.select("p").first();

if (p!=null) {
    System.out.println(p.ownText());
}

OUTPUT

Earth

how to deselect a css style using javascript?

You are using the wrong CSS selector: ".selectpicker select" means "the select elements child of elements having the selectpicker class"

you want the select element having the selectpicker class.

execute this javascript :

$('select.selectpicker').show();

it will set "display:block" on this element and it will be visible.

Edit

from the selectpicker doc (https://silviomoreto.github.io/bootstrap-select/).
Hide the custom select & show the native one.
As the select has display:none!important we need to force it to show.

There is three way of doing it:

remove the specific classes "selectpicker" and "bs-select-hidden" that makes it hidden.

$('select.selectpicker').selectpicker('hide')
                        .removeClass("selectpicker bs-select-hidden");

remove all classes (may break the layout)

$('select.selectpicker').selectpicker('hide')
                        .removeClass();

force display:inline-block (default display value for selects)

$('select.selectpicker').selectpicker('hide')
                        .css("display","inline-block !important");

Select and Deselect Table Rows in Jquery?

Try using .on with a delegated event handler, you can handle events from descendant elements with it. Get the count of elements with length.

$(function() {    $('#my-table').on('click', 'tr', function() {      // Toggle class on <tr>      $(this).toggleClass('selected');      // Count selected <tr>      const numItems = $('tr.selected').length;      $('#message span').text(numItems);      // Do sth if more than one <tr> is already selected      if(numItems > 0) {        console.log("Yeehaw.");      }    });});

.selected:not(.table-header) {  background-color: rgba(0,255,0,0.1);}

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css"><link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<table id="my-table" class="data">  <tr class="table-header">    <th>Entry Header 1</th>    <th>Entry Header 2</th>    <th>Entry Header 3</th>    <th>Entry Header 4</th>  </tr>  <tr>    <td>Entry First Line 1</td>    <td>Entry First Line 2</td>    <td>Entry First Line 3</td>    <td>Entry First Line 4</td>  </tr>  <tr>    <td>Entry Line 1</td>    <td>Entry Line 2</td>    <td>Entry Line 3</td>    <td>Entry Line 4</td>  </tr>  <tr>    <td>Entry Last Line 1</td>    <td>Entry Last Line 2</td>    <td>Entry Last Line 3</td>    <td>Entry Last Line 4</td>  </tr></table>
<p id="message"><span>0</span> row(s) selected!</p>
</div>

By first click select div and unselect others, by second click on the same div unselect it

You can do it like this:

// If there was a selected element which is not this
if (selectedEl && selectedEl !== this) {
  selectedEl.classList.remove("selected");
}
// Toggle this
this.classList.toggle("selected");

As noted in the comments, your styles are a little misleading. You may want to have different styles on :hover and .selected. The demo below also changes that.

Demo:

var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function() {

    var selectedEl = document.querySelector(".selected");
    // If there was a selected element which is not this
    if (selectedEl && selectedEl !== this) {
      selectedEl.classList.remove("selected");
    }
    // Toggle this
    this.classList.toggle("selected");

  }, false);
}

.optionsecoptions {
  width: 400px;
  padding-left: 10px;
  line-height: 40px;
  background: #eceded;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.1s ease-in;
}

.optionsecoptions:hover { background-color: #bfe5ff; }
.optionsecoptions:active { background-color: #2d546f; color: #ffffff; }
.selected { background-color: #226fa3; color: #ffffff; }
.selected:hover { background-color: #4d99cc; }

<div class="optionsecoptions">
  Computers
</div>
<div class="optionsecoptions" style="top:151px;">
  Electronics
</div>
<div class="optionsecoptions" style="top:212px;">
  Mechanical
</div>
<div class="optionsecoptions" style="top:273px;">
  Electrical
</div>

How to Deselect with CSS