Get all elements from class with specific css style

I want to get the first element that has style.fontWeight = 'bold';

Heres what i tried

function navigate(input) {
  var array = document.querySelectorAll('.menuulli').style.fontWeight == 'bold';
  console.log(array)
}

Use querySelectorAll with the attribute selector:

const array = document.querySelectorAll('.menuulli[style="font-weight: bold;"]'); 

console.log(array);

If you have a more than one style declaration on your HTML tag. For example: <div class"menuulli" style="color: red; font-weight: bold;">

Then use this selector:

/// note the asterisk
const arr = document.querySelectorAll('.menuulli[style*="font-weight: bold;"]');

Here is a JSFiddle example: jsfiddle.net/Konrud/g7vzc9s5

CSS [attribute^=value] Selector, Set a background color on all <div> elements that have a class attribute value that The [attribute^=value] selector matches every element whose attribute value� When styling specific elements with CSS, it is helpful to visualize the HTML code as a family tree with parents, children, and siblings. In the following code example, the tree starts with the html element, which has two children head and body. The head has a child element called title. The body has h1, ul, and p elements as children.


Since bolder, bold, normal all maps to their corresponding numerical values for the weight of the fonts you can try the following way:

function navigate(){
  var els = document.querySelectorAll('.menuulli');
  els = [...els].filter(el => {
    return getComputedStyle(el).fontWeight == "700"
  })[0];
  return els;
}
console.log(navigate());
.menuulli{
  font-weight: bold;
}
<ul>
  <li class="menuulli first">1</li>
  <li class="menuulli">2</li>
</ul>

CSS Selectors Reference, In CSS, selectors are patterns used to select the element(s) you want to style. element.class, p.intro, Selects all <p> elements with class="intro" :only-child, p: only-child, Selects every <p> element that is the only child of its parent While using this site, you agree to have read and accepted our terms of use, cookie and � The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below).


You can find the first element by

function navigate(input) {
  var list=[];	
  var array = document.querySelectorAll('a.js-gps-track');
  array = array.forEach(function(ele){if(ele.style.fontWeight === "bold"){list.push(ele);}});
  console.log(list[0]);
}

CSS .class Selector, Select and style all elements with class="intro": .intro { background-color: The . class selector selects elements with a specific class attribute. To select elements � So far, we have seen a few CSS style properties and how they can be applied to HTML elements. However, this way of styling affects all the HTML elements, it would be useful to selectively style certain p tags rather than all of them.


querySelectorAll returns a NodeList so you cant check for styles on that but you have to check on items.

function navigate(input) {

const elems = document.querySelectorAll('.menuulli');
const elemsArray = Array.from(elems);
array = elemsArray.map((ele)=>
ele.style.fontWeight === "bold");
}

CSS Attribute Selector, It is possible to style HTML elements that have specific attributes or attribute values. The following example selects all elements with a class attribute value that� Other than being the C in the acronym CSS, the fact that style sheets are described as "cascading" refers to an important, if complex, part of the way styles are applied to the elements in a document.


CSS Selectors, The class selector selects HTML elements with a specific class attribute. To select The grouping selector selects all the HTML elements with the same style definitions. In this example we have grouped the selectors from the code above :. Generally you can access style parameter using.attr ('style'). If you want to access computed style you can use window.getComputedStyle (element) in Opera, Firefox, Chrome and other sane browsers. For IE you'd do the same with element.currentStyle. Also if you wish to access individual CSS style you can do so with jQuery.css method.


Selectors, In CSS, pattern matching rules determine which style rules apply to elements in the If the universal selector is not the only component of a simple selector, the " *" may be Here, the selector matches all SPAN elements whose "hello" attribute has Thus, for HTML, div.value and div[class~=value] have the same meaning. The getElementsByClassName () method returns a collection of all elements in the document with the specified class name, as an HTMLCollection object. The HTMLCollection object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.


How to select all child elements recursively using CSS , It select all element of specific parent. Child element selector. </ title >. < style > . div > p {. background-color: green;. } div class = "GFG" > Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button � This code "div.test th, td, caption {padding:40px 100px 40px 50px;}" applies a rule to all th elements which are contained by a div element with a class named test, in addition to all td elements and all caption elements. It is not the same as "all td, th and caption elements which are contained by a div element with a class of test". To