Looking to emphasize the second list item (li) within a selected dropdown list with a designated unordered list class of "chosen-results".
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen">
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
In need of assistance utilizing jQuery to consistently target and highlight the second li element within the ul class "chosen-results" by altering its CSS attributes?
I've attempted various approaches, including a basic script such as
$("ul.chosen-results:second li").css('background-color','yellow');The objective is to differentiate this specific list item from the others in terms of highlighting when hovered over.
UPDATE: Also explored the following methods, which unfortunately did not yield any visible changes:
(function ($) {
$("ul.chosen-results li:nth-child(2)").css('background-color','yellow');
//$('ul.chosen-results > li:eq(1)').css('background','red');
})(jQuery);
UPDATE 2 Complete HTML BODY Structure:
<body class="html not-front logged-in no-sidebars page-node page-node-add page-node-add-event-webinars i18n-en admin-menu coffee-processed masquerade-float-block-processed">
<div id="site-content">
<div class="row">
<div id="second-sidebar" class="clearfix">
<div class="flex-wrapper">
<div id="content">
<div class="region region-content">
<div id="block-system-main" class="block block-system">
<div class="content">
<form class="node-form node-event_webinars-form" action="/node/add/event-webinars" method="post" id="event-webinars-node-form" accept-charset="UTF-8">
<div>
<div class="form-item-title form-wrapper" id="edit-title-field">
<div class="form-item form-type-select-or-other form-item-title-field-und">
<div class="select-or-other select-or-other-processed">
<div class="form-item form-type-select form-item-title-field-und-select">
<select class="select-or-other-select form-select required chosen-processed" id="edit-title-field-und-select" name="title_field[und][select]" style="display: none;">
<option value="" selected="selected">- Select -</option>
<option value="select_or_other">< select to create new webinar title or choose from existing below ></option>
</select>
<div class="chosen-container chosen-container-single select-or-other-select form-select required chosen-processed" title="" id="edit_title_field_und_select_chosen" style="width: 446px;">
<a class="chosen-single">
<span>- Select -</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result result-selected" data-option-array-index="0">- Select -</li>
<li class="active-result" data-option-array-index="1">select to create new title</li>
<li class="active-result" data-option-array-index="2">This</li>
<li class="active-result" data-option-array-index="3">That</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>