Design several unique styles for QPushButton using .qss

I am facing an issue where I need to create different styles for QPushButton. For instance, I have two QPushButtons:

QPushButton *next; 
QPushButton *prev;

I want the "next" button to have a green background and the "prev" button to have a blue background. So, I added the following code in my .qss file:

//.qss file

QPushButton:nth-child(1)
{
    background-color: green;
}

QPushButton:nth-child(2)
{
    background-color: blue;
}

However, when I compile it, all elements of QPushButtons end up being green. Is there a way to make each button have its own unique color?

This is just a basic example illustrating my problem.

Answer №1

To target specific elements, make use of the correct selectors. The selector QPushButton covers all elements belonging to the type QPushButton or its subcategories.

Name your buttons using QObject::setObjectName() and then you can easily identify them by their ID in the style sheet, much like in CSS.

Let's stick with the variable names provided in the initial question:

C++

next->setObjectName("next");
prev->setObjectName("prev");

Style sheet

#next {
  background-color: green;
}
#prev {
  background-color: red;
}

For more details on selector types and the syntax of style sheets, refer to the documentation here.

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

Flex box causing Bootstrap5 responsive table to overflow

Need help with fixing overflow issue in a fixed-width div used as a left sidebar. The main content renders correctly except for tables with many columns, causing overflow before the scroll bar appears. How can this be resolved? Various layout attempts hav ...

@media query not functioning properly with certain rules

I've hit a roadblock because my @media query is functioning properly for the initial rule, but fails to work for subsequent rules. For instance, I managed to make the "subButton" disappear when the screen size decreases below the specified width. How ...

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

Showing a multi-column layout for an HTML ul list

I have an automatic nested list structure that looks like this <ul> <li>AAA</li> <li>BBB <ul> <li>111 <ul> <li>XXX</li> </ul> </li> <l ...

Is it possible to utilize CSS variables within a font lineup and ensure compatibility with older browsers?

Is it possible to utilize a CSS variable to store a font for cases where the user may not have the specified font installed? For example: :root { --common-font: Comic Sans MS; } .header1 { font-family: CoolFont1, var(--common-font); } Would o ...

Achieving compatibility between angular-bootstrap modal and angular-1.3

Wondering if anyone has managed to successfully use angular-bootstrap modals with angular-1.3.x? I've had no issues with my modals on angular-1.2.x, but as soon as I upgraded to angular-1.3.11, the modals stopped showing up. When I click the button ...

Tips for keeping the footer firmly planted at the bottom of your Bootstrap 4 page

I have a question that might sound familiar! I want my footer to sit at the bottom of the page, but not remain fixed in place when I scroll. I'm aiming for a footer similar to what you see at the bottom of this webpage Footer Example. Here's the ...

Initiating CSS animation from the start

Having an issue with the "Start button" that plays both animation and background sounds. When I pause it, the animation does not stop where it left off and starts from the beginning again. I tried using animation-play-state: pause and animation-fill-mode: ...

Utilize jQuery to automatically assign numbers to <h1-h6> headings

Looking to develop a JavaScript function that can automatically number headings (h1- h6) for multiple projects without relying on CSS. Currently achieving this with CSS: body { counter-reset: h1; } h1 { counter-reset: h2; } h2 { counter-reset: h3; } ... T ...

`Addressing issues with table cell layout for improved horizontal scrolling`

I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel. My understanding was that position: absolute elements ...

The design of Angular2 components is influenced by the CSS styles set within their containers

If I have a component named MyComponent with a table in its view <table> <thead> <tr> <th class="col1">COL1</th> <th class="col2">COL2</th&g ...

Troubleshooting: JQuery is not properly adding the CSS value

I have a piece of code that adds a CSS class to an element once the user scrolls to a specific point on the page. This is intended to create a sticky menu bar. The distance to scroll is determined based on the screen resolution and is calculated using JQue ...

Differences in line spacing can be observed between the INPUT and LABEL elements

What could be causing this unusual behavior when setting line-height to match font-size: While the height of label is 16px, the height of input is 18px... Why is that? If I adjust line-height: 18px or higher, the heights suddenly align. But why does this ...

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

Spin picture and optimize margins

I need help rotating an image by 90 degrees that is positioned between two boxes. The issue I am facing is that the rotated picture overlaps with the two boxes in this scenario. Example 1: Incorrect formatting CSS: .box{ height:50px; width:200px ...

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

Changing the initial placement of GridActionsCellItem in Material-UI's DataGrid

I'm currently working on customizing the placement of the GridActionsCellItem elements within the MUI DataGrid component. My goal is to alter the default position of the actions menu in relation to its trigger element. The actions menu relies on a Pop ...

The aspect ratio of a DIV element is not maintaining its scale properly in Firefox

My current challenge involves using a Script to Scale a Div while maintaining the aspect ratio. The objective is to ensure that 100% of the DIV remains visible while maximizing its size. As you scale the browser width, the div adjusts its height to 100%, a ...