Stylish CSS selector

Is there a way to target CSS path based on the style of an element? For instance, if I have two ul elements on a page - one with a style of list-style-type: lower-alpha;:

<ul start="1" style="list-style-type: lower-alpha;">

and the other ul without the list-style-type style:

<ul start="1">

I want to apply CSS only to the ul element that has the list-style-type. How can I create such a CSS selector path?

The challenge is having both numeric and lower-alpha ul elements on the same page where I want to make the numbers bold in alpha and numeric ul's. Currently, I am using:

.ts4page  ul,ol li:before {
    content: counter(item, lower-alpha) ". ";
    counter-increment: item;
    font-weight: bold;
    margin-bottom: 3px;
}

However, this applies the bold styling to all lower-alpha ul's on the page, not just the ones with 

style="list-style-type: lower-alpha;"
.

Any suggestions are appreciated! Thanks!

htmlcss

Answer №1

To target a specific style attribute, you can use the attribute selector 

[style="list-style-type: lower-alpha;"]

ul[style="list-style-type: lower-alpha;"] {
  color: blue;
}
<ul start="1" style="list-style-type: lower-alpha;">
  <li>Item</li>
  <li>Item</li>
</ul>
<ul start="1">
  <li>Item</li>
  <li>Item</li>
</ul>

If the style attribute contains multiple styles and you need to find a specific one, you can use [attr*=value] to locate list-style-type: lower-alpha; as a substring

ul[style*="list-style-type: lower-alpha;"] {
  color: blue;
}
<ul start="1" style="opacity: .7; list-style-type: lower-alpha; font-size: 12px;">
  <li>Item</li>
  <li>Item</li>
</ul>
<ul start="1">
  <li>Item</li>
  <li>Item</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Preventing scrolling in one div while focusing on another div

I am currently in the process of creating a website that functions as a single page site. The main feature of the site is a masonry grid of images. When a user clicks on an item, a detailed panel slides in from the left. Once the panel is closed, it slide ...

javascriptjqueryhtmlcss

Switching the horizontal tab design from Bootstrap 3 to Bootstrap 4

I'm currently working on adapting a code snippet from bootsnip that creates horizontal Bootstrap tabs with material-style design. I've encountered some challenges in converting it to Bootstrap 4, specifically in updating the CSS to use .nav-item ...

htmlcsstwitter-bootstrap-3bootstrap-4twitter-bootstrap-4

Does Google Cloud CDN not store data from the storage bucket?

I've been experimenting with combining a Load Balancer, Cloud Storage, and CDN for the past few weeks. Unfortunately, I have not been successful in getting it to work as expected. I uploaded some static files (2 jpgs, svgs, and css files) to a multi- ...

csscachinggoogle-cloud-platformgoogle-cloud-storagecdn

Limit selection choices in select element

Similar Question: Prevent select dropdown from opening in FireFox and Opera In my HTML file, I have a select tag that I want to use to open my own table when clicked. However, the window of the Select tag also opens, which is not desirable. Is there a ...

javascripthtmlselect

Initiate keyframe animation after completion of the transition (CSS)

Can someone assist me with implementing my idea? I want the "anim" animation to start as soon as image1 finishes its transition. My attempted solution: I tried using "animation-delay," but that didn't work for me. The issue is that "animation-delay" ...

css

Changing an HTML5 attribute with the power of jQuery and ajax

I'm working on a rails view where I have a div that displays a collection of users: <div id="users" data-current_page="<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="635e2316100611104d00161111060d7">[email  ...

jqueryruby-on-railshtml

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

Unable to conceal tab content upon clicking the identical tab

I recently implemented a tab system with panels that seems to be working well when switching between tabs. However, I'm facing an issue where clicking on the same tab does not hide the corresponding panel and reset the aria attributes as intended. I&a ...

javascripthtmljquerycss

"What is the best way to retrieve the value of a div element with jquery

Attempting to retrieve the value of a div using jQuery in Chrome console from this HTML: <div class="col-md-3"> <div class="vou-col" style="cursor: pointer"> <h4>Free Large Bucket</h4> <span class="sku-info">Voucher ...

javascriptjqueryhtml

Unable to locate template or render function for Vue Draggable Next component

Looking to incorporate Vue Draggable Next into a Vue 3 example page but encountering some challenges. I've attempted to follow the instructions in the repository. However, I ran into issues when importing the Vue Draggable Next component and had to re ...

javascripthtmlvue.jsvuejs3vuedraggable

Navigating with Angular Bootstrap Navbar Dropdowns

Currently, I am in the process of developing an Angular project that includes a Bootstrap Navbar. The Navbar features dropdown menus with items that direct users to various pages. To achieve this, I have incorporated Bootstrap, jQuery, and Popper into my ...

htmljqueryangulartwitter-bootstrapbootstrap-4

Tips for setting a value in $scope within an ng-repeat loop in AngularJS

I'm currently facing an issue with ng-repeat in angularJS, specifically on how to assign a value in $scope inside ng-repeat. Here is my scenario: I have a JSON file that contains all the data structured like this: [ {BookID:1,Chapter:1,ContentID:1, ...

javascripthtmlangularjs

Selecting multiple options on a mobile device

I'm facing an issue that seems quite unusual. I created a multiple select form using bootstrap. On the mobile version through the browser console, all the information is being displayed correctly (screen1). However, when I try it on an actual mobile d ...

htmlcssbootstrap-4

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

javascripthtmlarraysangularimage

React component not extending to the bottom of the screen

Within my Index.js file, I have created an Index component that includes a navbar and a landing page layout. I aim to have a showcase section taking up 40% of the width, with the remaining 60% dedicated to a react-bootstrap carousel. The Index component sh ...

htmlcssreactjsreact-bootstrapbootstrap-5

Cloned bootstrap nav tabs are controlled just like the original version

I have a unique scenario where I need to generate a series of "cards" with tabs on top (each card having tabs). To accomplish this, my plan was to use a template element that I can clone and then populate. Everything seems to work fine, except for the tabs ...

javascripthtmltwitter-bootstrap

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

javascripthtmljquery

CSS - How can text and images be effectively combined for a visually appealing design?

We're tasked with designing text in the following format: Text in English XXX Text in English XXX Text in English. The XXX placeholders need to be replaced with images that have the same height as the English text. Is there a better solution for th ...

css

How to link an external CSS file to a Vue.js project

I created a new project using @vue/cli and now I want to add an external CSS file to my App.vue Here's what I attempted: <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | ...

javascriptcssvue.jswebpack

Adjustable slider height in WordPress

Struggling with the height of the slider on my website. I've tried various CSS adjustments and even tweaked the Jquery, but it still doesn't display properly on mobile devices. For instance, setting a height of 300px looks perfect on desktop brow ...

jqueryhtmlcsswordpress