Styling Labels with CSS Wildcard

I have been using the free NinjaForms plugin on my WordPress site. The default styling for labels is bold, but I prefer them to be lighter. Currently, I achieve this through CSS by targeting individual field IDs. However, this method becomes tedious when adding new forms as it requires constant updates to the CSS.

My goal is to use a wildcard in the CSS so that all future fields automatically inherit the desired font style. I attempted different approaches such as using ID attributes with wildcards but none of them seem to work as expected.

You can find the form URL here:

Here's an updated HTML example for one field:

<div id="nf-field-24-wrap" class="field-wrap textbox-wrap nf-fail nf-error" data-field-id="24">

    <div class="nf-field-label">
        <label for="nf-field-24" class="">Company Name <span class="ninja-forms-req-symbol">*</span> </label>
    </div>

    <div class="nf-field-element">
        <input value="" class="ninja-forms-field nf-element" id="nf-field-24" name="nf-field-24" aria-invalid="true" aria-describedby="nf-error-24" type="text">
    </div>


</div>

Answer №1

If you want to select IDs that start with a specific string, use the wildcard symbol ^.

To target label elements nested within an element with a specific ID, you can do so by using the selector [id^="nf-field-"] label.

[id^="nf-field-"] label { /* your styles here */ }

Using label[id$="nf-field-"] will not work in this case because it targets labels with IDs ending in "nf-field-" instead of labels that are descendants of elements with those IDs.

For a comprehensive list of attribute selectors, visit MDN.

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

Issue with readonly is preventing the ability to alter the font color of the input

I need to change the font color of a disabled input. When it is disabled, it appears gray and I want it to be black instead. I attempted to use readonly but that did not have the desired effect, and now the input is showing [object Object]. Below is my HTM ...

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

What causes the "v-col" width to suddenly alter after adding the "bg-red rounded" class?

I'm struggling to organize the data into blocks using Vuetify. When I apply the "bg-red rounded" class to the "v-col", it alters the width of the column, resulting in an undesired grid structure. Here is the template section of my Vue file. Some data ...

Tips for sending a value or props to a CSS file

Is there a way to dynamically update the x and y position based on user clicks, and then apply these changes to the top and left properties of a div? .dataCardAbsolute { position: absolute; top: 100px; left: 300px; overflow: auto; } React.useEffec ...

Add some animation to elements when the page loads

I am curious about triggering a css animation when the page loads. I am currently experimenting with css animations for the first time. Here is what I have created so far: https://jsfiddle.net/7prg793g. However, it only works upon hover at the moment. * ...

utilizing Javascript to insert a class with a pseudo-element

Witness the mesmerizing shining effect crafted solely with CSS: html, body{ width: 100%; height: 100%; margin: 0px; display: table; background: #2f2f2f; } .body-inner{ display: table-cell; width: 100%; height: 100%; ...

Differences in React projects utilizing materialize-css compared to those using react-toolbox or material-ui

Is there a difference in technical benefits or code reliability when directly using material-css in JSX versus utilizing JSX specific libraries like material-ui or react-toolbox? Conversely, could using JSX libraries like material-ui or react-toolbox provi ...

Unexpected resizing of DIV element in Chrome

Working on my new PHP website, I encountered a strange issue recently. I have a file for the top navbar that is included on every page and it was functioning perfectly fine. However, while creating a register form, I noticed something odd happening. When r ...

I am utilizing the ternary operator within the map function to dynamically adjust the column width of a material table

Looking to adjust column widths based on the IDs received from the map function. Check out the code snippet: <TableRow> { tableData.header.map(header => { header.i ...

Customizing skin CSS for DNN Portal and Page images

Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

What is the process for embedding images and text within a nested division element?

I have a website layout with 4 main sections: header, left side, right side, and footer. I would like to further divide the header into two sections - left header and right header. The right header should contain an image along with other options like home ...

I'm looking for a Visual Studio add-in that can identify and flag any unused CSS classes or IDs within the entire solution

Exactly as the headline suggests. If not, what are some reliable online services you've tried for decluttering oversized stylesheets? ...

The footer covers the content when the content fills the entire screen

I'm having trouble getting my .content_pro to stick to the top of the footer, regardless of screen resolution. When I set the height to 100%, it ends up underneath the footer. I've been struggling with this for hours but can't seem to make i ...

javascript the unseen element becomes visible upon page loading

my website has the following HTML snippet: function getURLParameters() { var parameters = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { parameters[key] = value; }); return param ...

The alignment issue persists when attempting to set 'relative' on the parent and 'absolute' on the inner element in a Bootstrap column for bottom alignment

Here is a snippet of my basic HTML code: <div class = "row"> <div class = "col-xs-8"> <p>long long long long text that generates a taller column</p> </div> <div class = "col-xs-4"> <p> ...

The fluid table within the Bootstrap container is not adapting to different screen

Can't figure out why the bootstrap container fluid table is not responsive. Even though I used an example of My First Bootstrap Page that works fine and is responsive, this particular table remains unresponsive. I want to avoid using a scroll but will ...

Styling images side by side with CSS in Internet Explorer

I've encountered a CSS dilemma. I have a collection of images that I want to present side by side using an unordered list within a fixed width container. The goal is to have 3 images per row before moving on to the next set of 3 images. Each list ite ...

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

I'm currently designing a card layout with images and aiming for uniformity in size. The plan is to have 4 columns in each row, with one card per column. Each subsequent row will also contain 4 cards. However, there seems to be an issue where the ca ...

Trouble keeping HTML/Javascript/CSS Collapsible Menu closed after refreshing the page

My issue is that the collapsible menu I have created does not remain closed when the page is refreshed. Upon reloading the page, the collapsible menu is always fully expanded, even if it was collapsed before the refresh. This creates a problem as there is ...