How to Select an Element That Has a Certain Class

Select elements with certain class and not other classes

You can select them with a query Selector and :not

console.log(document.querySelectorAll("div.b:not(.a)"))

    <div class="a">2</div>    <div class="a b">3</div>    <div class="b">4</div>

Css Selector for elements with a specific class and parent

The > selector indicates a direct parent. Your above code .sub caption > h1 is attempting to select any h1 element that is a direct child of a caption element, where the <caption> element is a child of an element with the class .sub. It is not working because you don't have a parent of <caption> with the class of sub.

You can specify that your target elements must contain specific classes by writing the element selector immediately followed by the class selector (without a space). For example, h1.sub targets any <h1> element that has the class sub. It won't target <h1> elements that don't have the .sub class, nor elements that are not <h1> elements but do have the .sub class.

It's also important to note that <caption> is only valid as a direct child of <table>.

Essentially, what you're looking for is the following:

caption > h1.sub {  color: red;}

<table>  <caption>    <h1 class="sub">Text</h1>  </caption></table>

How to select element that has a certain class and has a class that ends with?

You just have a minor issue with your selector.

class$="TrainingActive"

Should actually be:

class*="TrainingActive"

Resulting code:

console.log($('span[class*="TrainingActive"].selected-for').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><span id="student" class="studentTrainingActive selected-for">Foo bar</span>

How to select or identify an element that has a class that begins with a specific pattern in the midst of other irrelevant classes?

From the research I've done and the responses to this question, I've determined that at this point in time there is no clean way to perform this action. So I have resigned to using a hack job that breaks the classes down into an array and performs a check on the start of each class for the string.

$.fn.hasClassStartingWith = function(needle){  var found_match = false;    $(this).each(  function(i){      var classlist = this.className.split(/\s+/);      $.each(classlist,function(){          if(this.startsWith(needle))          {            found_match = true;          }      });    }  );    return found_match;  }$("*").each(function(){  if($(this).hasClassStartingWith('col-'))   {       $(this).css('background','#39F');   }  });

[class*=" col-"], [class^="col-"]{  background: red;  color: #FFF;  border: 10px solid #16A;  height: 50px;  text-align: center;  line-height: 28px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="row">    <div class="first-class col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>    <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>  </div>
  <div class="row">    <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>    <div class="start-with-something-else col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>  </div>
  <div class="row">    <div class="so many classes                 col-xs-6">.col-xs-6</div>    <div class="bootstrap spam helper classes                col-xs-6">.col-xs-6</div>  </div>  </div><p>If the javascript worked then the above column elements have a background of blue instead of red.</p>

Select all elements before element with class?

a {  text-decoration: none;  border-left: 1px solid black;}
a.active, a.active ~ * {  border: none;}

<div>    <a href>One</a>    <a href>Two</a>    <a href>Three</a>    <a href class="active">Four</a>    <a href>Five</a></div>

How to select all elements with a class in JS

It's important to learn what basic language syntax does first. The [0] is selecting the 0 index of an array (or array-like object). So to operate on them all, you can use a loop with a variable that is incremented starting at 0 and continuing until it goes out of bounds of the array.

function replaceEmotes() {
    var messages = document.querySelectorAll(".message");
    for (var i = 0; i < messages.length; i++) {
        var str = messages[i].innerHTML.replace(":smile:", "<i class='em em-smile'></i>");
        messages[i].innerHTML = str;
    }
}

There are other ways too, but this is a fundamental syntax that should probably be learned first.

How to select the last element that has a specific class?

This should ideally be done by assigning a class to the last occurring item.

To do it programmatically, we can use querySelectorAll to get a list of all items, from which we can get the last element and add a class to it.

[...document.querySelectorAll('.progress.completed')].slice(-1)[0].classList.add('last-item');

.last-item{
  background-color:#ccc;
}

<div class="steps">
  <div class="progress completed">a</div>
  <div class="progress completed">a</div>
  <div class="progress">a</div>
  <div class="progress">a</div>
</div>

How to select element has class start and end with specific string using jquery?

You can combine two jquery Attribute Starts With Selector [name^=”value”] and Attribute Ends With Selector [name$=”value”] to do this work.

$('div[class^="wrap-"][class$="-addon-1"]')

$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrap-1-addon-1">wrap-1-addon-1</div><div class="wrap-2-addon-1">wrap-2-addon-1</div><div class="wrap-3-addon-1">wrap-3-addon-1</div><div class="wrap-3-addon-2">wrap-3-addon-2</div>