using jquery-1.6.1.min.js and jquery-ui-1.8.13.min.js.
I have a textbox sitting inside a jquery dialog
<div class="chat-response">
<input class="chat-response-textbox" name="chat-response-textbox" placeholder="Type message here">
</div>
I have some associated css which I have made the font size intentionally large:
.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
However when running in Chrome/IE the font size doesn't come out as 20.
In Chrome I can see the style is being taken from jquery.ui.theme.css
Elements Window
Styles Window
Why is this occurring given I explicitly assign a class to the input element?
It's all about the selector specificity. The most-specific selector wins; in this case that's .ui-widget input.
Just make your selector more specific than that one, and it'll work:
.ui-widget input.chat-response-textbox
{
font-size: 20px;
font-family: Arial;
}
Try changing it to
input.chat-response-textbox
That makes your style more specific, which should override JQuery UI.
Related
#who {
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
color: white;
background-color: #f91845;
position: absolute;
display: inline-block;
transform: rotate(-40deg);
top: 200px;
left: 300px;
}
<div id="who">
<h1 class="tlt">Who am I?</h1>
</div>
I also tried the below one because the one above is not working:
h1:first-child{
font-size: 70px;
}
Please let me know why the font isn't changing? If I use h1:first-child, the font is getting applied to all h1 elements.
try
.tlt
{
font-size:70px!important;
}
The browser applies two sets of CSS to the page: the user agent styles (the browser “defaults”) and the author styles (yours).
The user agent styles set things like heading font sizes. These target the <h1> directly and set a font size, usually about 2em.
Your styles target the parent element #who. Some properties, such as the font properties inherit down the DOM to the <h1>, but declarations that target the <h1> directly will override those inherited values. The User Agent styles are targeting the <h1> are doing this.
If you want to override the user agent styles, you need to target the <h1> as well. This is why something like this works:
h1 {
font-size: 70px;
}
See, h1 is inside div of id who. Now, if you set font size of #who div then h1 should have it's font size but in the application there would be some font-size of h1 already defined; so it would override #who div's font-size.
h1:first-child
This will target all first child of any other containers. So, ideally this won't be a right method.
#who h1{font-size:70px;}
This would do solve your problem.
Now if you wanna target first child h1 of #who div then use following css
#who h1:first-child{font-size:70px;}
Because if your code is exactly what you have posted you dont use id selector in your css.
for more information please read
W3 CSS Selectors
According to updated question:
Applying to all h1's is also related to that
since you are not referencing h1 inside 'who' id it selects all of them. Because every h1 is first child of another element
Can you please change
h1:first-child
to
#who h1:first-child
I am trying to put custom styling only on the visible item when the drop down is closed, but not the items inside the drop down.
To do this, I put custom styling on select, then undo them on option. For example, I have font-style: italic set on a select element. But webkit browsers and IE10 seems to ignore font-style overrride.
HTML
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
</select>
CSS
select {
color: red;
font-style: italic;
}
option {
color: black; // undos color:red
font-style: normal!important; // This should undo the italic font style.
}
jsFiddle
Why do those browsers ignore the font-style override even with !important? How can I fix this?
Select boxes have very poor css styling support on all browsers.
To have total control of select box styling you will have to use a javascript solution to replace the select box with something that can be styled. http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/ is one option, or you might be best off looking at a jQuery plugin or Bootstrap.
What I found through Google was that the option elements are in fact styled by the OS, and can therefore not be styled through CSS (without JavaScript hacks or such).
In CSS, how can I bold only the phone number so it will inline with the rest of the statement but the number is bold?
Instead of doing it in HTML as:
<div class="bubbleContent">› Start posting jobs today–
<strong> 01234 567 890</strong></div>
HTML:
<div class="content">› Call me – 01234 567 890</div>
CSS:
div.bubbleContent
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
Thanks.
You can use <span> as in example shown below:
HTML:
<div class="content">› Call me – <span class="highlight">01234 567 890</span></div>
CSS:
div.content
{
font-size: 11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-top: 15px;
}
span.highlight
{
font-weight:bold;
}
You can also use <div> element with property display:inline, so it will be inline with the rest of the text.
You can’t. You cannot style a piece of text in CSS without making it an element one way or another (unless it can be referred to as a pseudo-element, but this currently works for first letter and first line only).
There are many HTML elements that you could use (such as strong, b, span), but the point is that you need some element. You can use an element that is displayed in bold by default, or you can style it with CSS.
You could generate the element with JavaScript client-side, though. For this, you would need to specify the syntax of phone numbers to be recognized, making sure that only phone numbers will match it in the content that will be used.
I am using twitter bootstrap (TB) and it seems like their CSS Rules are taking precedence when they shouldn't. I created this fiddle to show the problem:
http://jsfiddle.net/whoiskb/Za2TB/
HTML
<div class="teaser">
<h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1>
</div>
CSS (plus an external link to twitter bootstrap)
div.teaser h1.teaserText {
font-size: 100px;
font-weight: 100;
color: black;
line-height: 90px;
font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial";
text-transform: uppercase;
}
div.teaser h1.teaserText label {
color: #FCCE00;
}
From what I understand about the specificity rules, the rules defined for label in TB should only get a value of 1 since html selectors get a value of 1. My class should have a value of 23 since I have 3 html selectors and 2 class selectors which should get a value of 10 each. As you can see in the fiddle though the label selector in the TB css definition is taking precedence.
Could someone explain what I am missing here?
BTW, I know I can use the !important tag to resolve this, I am just trying to get a better understanding of CSS Specificity rules.
Specificity rules only apply if different Rules target the **same element (as for your color of the label), not if different elements are targeted (even if some styles of that element would be inherited).
You have one stylerule applied to labels, and that is the color, which gets applied correctly. All your other styles are applied to another element, so the TB styles targeting the label directly are preferred of course.
Some styles are inherited (like font-size and line-height in your example), but they are overridden as soon as there is a rule targeting your element directly. TB overrides your font-size and line-height with the following rule:
label, input, button, select, textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
You could fix this easily by declaring:
div.teaser h1.teaserText label {
color: #FCCE00;
font-size:inherit;
line-height:inherit;
/* and so on */
}
I'm not exactly clear on what you think the problem is, but taking a guess:
CSS specificity decides what happens when there are two or more rules for one CSS property for a given element.
So, given this HTML:
<label class="myLabel">Hello!</label>
And this CSS:
label {
color: red;
font-size: 24px;
}
.myLabel {
color: blue;
}
The label will be blue, because .myLabel is a more specific selector than label.
However, the label will also have a font size of 24 pixels, because the .myLabel block doesn't include a rule setting the font-size property.
Is it possible to effect styles for descendants of a custom class only? I'd like to override some jQuery UI styles for the descendants of my DOM element only.
Something like
.myStuff .ui-button {font-size: 0.7em !important;}
<div class="myStuff">
<input type="button"></input> !-- jQuery UI class .ui-button
</div>
<input type="button"></input> !-- .ui-button not effected by my .ui-button style
I've tried the child selector (>) but it stops at the first level :(. I actually thought the double class syntax with the space was the correct one...but it doesn't work either.
These are the exact selectors I'm trying to override from jQuery UI:
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
I really just want to change the font size...I'll try to calculate it per your example, but I didn't have any luck yesterday :(.
You CSS looks alright, that should work, however I believe that you might be a victim of the CSS specificity. If you open up the jQuery UI stylesheet files, I believe you will see that the selector of the CSS rule you want to override is more specific than your CSS rule, thus has the upper hand and will be used in favor of your rule.
To be able to override it, you will have to add a CSS-rule of your own that has a greater specificity than the rule provided by jQuery UI.
Update
It is hard to give an exact example of how to override the rule in this case, since we don't know how the selector looks for the rule that we want to override. However, the general idea is that you will have to calculate the specificity of the rule that you want to override (refer to the Smashing Mag article linked above, on how to do this) and then make sure that your rules specificity is greater than the specificity of the rule you want to override. There are several ways to accomplish this, add extra classes or IDs to your selector for instance.
I guess the easiest way in your case would be to open up the jQuery UI stylesheet, find the rule that you want to override, copy the exact selector that they are using, use that selector and prepend it with your .myStuff class, and you should have a rule that is more specific than the one provided by jQuery UI.
Also, I would NOT recommend using !important to solve this problem. This is my personal opinion, but if you start using !important, you might be in for a world of pain later on when you try to modify your CSS. Throubleshooting faulty layouts can be really tough if you have rules specified with !important that break the normal flow of your CSS.
Yes, your example will work.
.myStuff .ui-button {some custom style}
However, check the dom with Chrome's developer tools (or FF or IE's) to verify that you are using the correct selectors. jQuery UI can add a great deal of dom elements for various widgets.