Using JavaFX to modify properties with multiple selectors

I've set up a stylesheet with the following styles:

*
{
    -fx-font-size: 15px;
}

.title
{
    -fx-font-size: 20px;
}

I assumed that since * is a more general selector than .title, the font size specified in .title would take precedence over it. However, to my surprise, no matter what font size I specify in .title, the title label still shows up as 15px. Removing the * block resolved this issue and the title label displayed the correct size from .title.

Am I doing something wrong here? I just want to establish an overall appearance while allowing certain nodes to have their own distinct look when needed.

Edit

It appears that this problem only affects font-related CSS properties. When I changed -fx-font-size to -fx-border-color in my example, it behaved as expected based on standard CSS rules.

There seems to be some peculiar behavior specifically related to font properties.

javacssjavafxjavafx-8javafx-css

Answer №1

Every node has its own assigned font size.

When it comes to labels (and similar elements), the text is displayed by a descendant node rather than the node itself. Normally, this descendant node would inherit the font size property from the label. However, if you are assigning the font size for every single node, then that property is assigned specifically to the descendant node and the value from the parent node is not utilized.

To resolve this issue, simply assign the new font size for descendants of the node with the class "title":

* {
    -fx-font-size: 15px;
}

.title * {
    -fx-font-size: 20px;
}

Answer №2

One way to emphasize styling in CSS is by using !important:

.title{
    -fx-font-size: 20px !important;
}

For more specificity, consider targeting elements with unique IDs:

#title{
   -fx-font-size: 20px !important;
}

This information can also be found at https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html under the section:

Styling Options for Scenes and Nodes

In JavaFX, styles can be applied through external style sheets or inline declarations. External style sheets are loaded from URLs specified in the Scene object's stylesheets variable. Inline styles are set via the Node setStyle API method, similar to the style attribute in HTML. Styles from a scene's style sheets take precedence over user agent style sheets. Additionally, use of "!important" in a style declaration can modify the precedence order of style rules.

Priority Rules in Setting Node Styles

In determining visual properties of a node in JavaFX, priority rules dictate which source takes precedence when assigning a property value:

• Inline style (highest priority)

• Parent style sheets

• Scene style sheets

• Values set through JavaFX API

• User agent style sheets (lowest priority)

The parent's style sheet holds greater weight than the scene's style sheets in defining custom styles for different branches of the scene graph.

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

Mobile devices not displaying background images correctly

My Wordpress website has a section with the code below, but the image is not adjusting properly on mobile phones. Can you provide some advice? .one_half_bg { width: 50%; float: left; background-position: 50% 50% !important; backgroun ...

wordpresscss

Managing both clicking and hovering events on a single element, ensuring that the popup modal remains open as long as it is being hovered over

After successfully implementing click and hover functionality on an element, I was able to position the popup relative to the mouse pointer based on a previous solution. However, I am now facing an issue where I want the popup modal to be fixed in a specif ...

javascripthtmlcssangularmouseevent

Is there a workaround available for setting the font-family to inherit in Internet Explorer 7?

I'm using a CSS class called "text_css" where I want to apply the inherit property. It's working correctly in IE8 and IE9, but I'm aware that it doesn't work in IE7. Does anyone have any suggestions for a workaround? ...

cssinternet-explorer-7

Unable to display Bootstrap Glyphicons within a div container

I've created the following code snippet: function acceptButtonClick(th) { var id = $(th).attr('data-id'); $(th).parent().parent().find('div.Declined').attr('class', "Approved"); $(th).parent().parent().find( ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for properly nesting a "carousel" div within an "oe_structure" without any overlapping issues

Having trouble with placing a "carousel" div inside the "oe_structure" in my odoo template. I am currently working on editing the "website_sale.products" template. As a newcomer to Odoo, can I use inheritance in my direct code to make edits? I'm stil ...

csslayoutbootstrap-4carouselodoo-13

Having trouble interacting with the "Continue" button on PayPal while using Selenium

Recently, I have encountered an issue with automating payments via PayPal Sandbox. Everything used to work smoothly, but now I am unable to click the final Continue button no matter what method I try. I have attempted regular clicks, using the Actions cl ...

javascriptjavaseleniumautomated-testspaypal-sandbox

Deciphering a system disruption using Splunk log data

In my quest to streamline the monitoring process, I am exploring a solution that would automatically adjust the response for a service experiencing numerous failures based on data from splunk logs. The goal is to proactively notify users of the ongoing out ...

javarestspring-mvcerror-handlingsplunk

Steps to Delete Branding WHMCS Ver 8.1 "Powered by WHMcomplete solutions"

As a newcomer to this community, I am reaching out for the first time seeking assistance. A friend of mine recently updated his WHMCS to the latest version and encountered a branding line above the footer area. Previously, he could remove it by editing th ...

phpjquerycsstemplateswhmcs

In a lineup of items arranged horizontally, the second to the last item is perfectly centered, whereas the final item stretches out to occupy all of the leftover

I am currently working on creating a horizontal list of items: https://i.sstatic.net/fu89D.png My goal is to have the second last item centered once the end of the list is reached, with the last item expanding to fill all remaining space. https://i.ssta ...

htmlcssflexbox

Exploring the world of title attribute tooltips and iframes

Is there a way to customize the appearance of a title attribute without losing its natural ability to extend beyond the borders of an iframe? ...

htmlcssiframe

Ways to create a smooth transition in element height without a known fixed target height

Is it possible to create a smooth height transition for an element when the target height is unknown? Replacing height: unset with height: 100px allows the animation to work, but this presents a problem as the height needs to be based on content and may v ...

javascripthtmlcss

When you click on the link in AngularJS, it will automatically open the textarea for you

I am aware of the function in CSS called "target" that changes the URL address. However, I need to achieve this effect without changing the URL. My main question is whether I can accomplish this using AngularJS. If so, could someone please explain how to a ...

javascriptcssangularjs

Coordinated Tab Navigation

Two tabbed navigations are present, one at the top and one at the bottom. Targeting the div through classes allows for relevant content to be displayed in both. Clicking the "Business" tab should show user-relevant information on both the top and bottom t ...

jquerycss

Bootstrap HTML - Medium-Sized Device Recognized as Large on Registration

Encountering some troubles with Bootstrap's Grid system on various devices. According to documentation, column sizes are based on window size: Extra small 576px , Small >= 768px , Medium >= 992px , Large >=1200px However, a medium devic ...

htmlcssgoogle-chromebootstrap-4

Tips for creating a fixed sidebar menu that is aligned to the right side of the page

I've been working on this for quite some time now and I'm trying to figure out how to keep a side menu in place, while having it float on the right side. Every time I try using the fixed element, it ends up moving my sidebar from right to left. A ...

csshtmlweb

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

I've been struggling with integrating Material UI and CKEditor5. The issue I'm facing is that CKEditor doesn't seem to be working properly. Despite trying to apply editor features like bold or italic, nothing changes on the screen. However, ...

cssreactjsmaterial-uickeditorckeditor5-react

Having trouble accessing the OMNeT++ IDE

Every time I try to launch the OMNeT++ ide, I encounter an error message stating "An error has occurred. See the log file". However, upon checking the log file, I am unable to find a solution. Yesterday, I was able to use the IDE without any issues. I did ...

javac++omnet++inet

Assigning null to a key in a JSON Object if the value is missing

I'm facing an issue with an object that requires 4 parameters to be set from a JSONObject. However, the JSONObject's get(String name) method only returns 3 values, resulting in a JSONException. Here's an example of the JSON structure: "JSON ...

javaandroid

Jenkins executes all groups instead of a specific group as a target

I have been working on automation using Selenium WebDriver, Maven, TestNG, and Jenkins. Here is an example of my TestNG code: @Test(groups="Support") public void method1() { //Implement logic here } @Test(groups="Login") public void method2() { ...

javamavenselenium-webdriverjenkins

ways to pinpoint a precise object pathway within a JSON

Working with json4s to parse a JSON into a Scala case class object has been successful so far: case class Person(Id: String, name: String) val personJSON = """[ {"Id": "1","name": "john"}, {"Id": "2","name": "george"}, ...

javajsonscalajson4s