A bit late to the tea party but thought I would share the solution I found & use. @simone’s answer is perfect if you can match the style attribute exactly. However, if you need to target an inline style attribute that may have other inline styles associated with it you can use: p[style*=”text-align:center;”] “*=” means … Read more
It’s the same as in CSS selectors: $(‘.headsection, .subtitle’);
There’s an specific CSS selector for this, the :not selector. And it has good compatibility: a:hover:not(:focus) { color: magenta; } a:focus:not(:hover) { color: cyan; } <a href=”https://stackoverflow.com/questions/24923647/example.com”>Stackoverflow</a> I also suggest you give preference to the focus event, since it’s somewhat more “static” than the hover state, with something like this: a:hover:not(:focus) { color: magenta; } … Read more
In the same way you can do this .class.class2.class3 { /*styles*/ } to target only things that have all 3 classes, you can can combine attribute selectors to do the same: [class*=”mybuttons-button”][class*=”-large”] { /*styles*/ } Granted it won’t work in a case like this: <span class=”my-buttons-button-color-small something-else-large”></span> since it contains both mybuttons-button and -large. If … Read more
You can use .parent > *:last-child or just .parent > :last-child An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect. .parent > *:last-child { background-color: red; } <div class=”parent”> <p>First child</p> <input type=”text” placeholder=”Second child” /> <div>Third … Read more
First things first, in order for a select element to not be in multi-selection mode, the multiple attribute must be entirely omitted. Even if you set multiple=”no” or multiple=”false”, the standard behavior is the same as HTML multiple or XHTML multiple=”multiple”. For more information, refer to the HTML spec. With this in mind, use the … Read more
Cascading variables (i.e. the var() notation) aren’t defined for use with anything but property declarations, so no, they cannot be used in selectors. Judging by their name, this makes sense, since only property declarations can cascade, not selectors. From the spec: A variable can be used in place of any part of a value in … Read more
Please remember that you can assign variables in CSS too. :nth-child(1) { –nth-child: 1 } :nth-child(2) { –nth-child: 2 } :nth-child(3) { –nth-child: 3 } Then you can apply it like this: animation: fade-in calc(var(–nth-child) * 1s) 1s forwards; And here come some demo.
To represent control states that are not natively conveyed in HTML, such as expanded (for example), then leaning on ARIA attributes as style selectors can be a good fit. In this case you are relying on CSS to add content to a page based on ARIA I do not think you need. First, support for … Read more
To select strong elements that are descendants of an element with class commandBar, use the descendant combinator along with a class selector: .commandBar strong In order to only select direct children strong elements, use the child combinator, >: .commandBar > strong Depending on your markup, you may also want to specify the element type that … Read more