jqueryUI Css widget, how to prevent descendant - css

i'd like to prevent CSS from my styles do descendants of descendants without giving them classes or ids? my jQueryUI widget are affected by my ascendant CSS.
i've tried
For instance:
.myClass > ul {...} instead of .myClass ul {...}
but it doesn't work (checked with Firebug 1.5/FF 3.6)
.myClass MUST BE a class, not an id (#). It seems to work with id, but that's not what i want..
In fact, i'd like something to 'contain' CSS jQueryUI Widget.
Thanks from your help.

Sebastien
Usually jQueryUI Widgets are wrapped inside a DIV that has a class such as .ui-widget, however those are usually at level of a first child of the body, meaning if you have your layout in something like a #wrapper div, the widgets styles won't be affected be descendant selectors coming from that wrapper, to make things clear:
<body>
<div id="wrapper"><h1>an h1 inside the wrapper</h1></div>
<div class="ui-widget"><h1>h1 inside the jquery ui widget</h1></div>
</body>
So if you do put #wrapper in front of all your styles jQueryUI won't pick them up.

Related

CSS - How to only apply a style to a div that is inside another div?

This would be easier to explain with an example:
I have a div ID that is used many times on my page.
I would like to style only 1 of these div's differently, without changing its name.
Is there a way to style this 1 div, if it is inside another div?
For example, my page contains many of these:
<div id="text2">Some text</div>
And the one I wish to change is:
<div id="container">
<div id="text2">Some different styled text</div>
</div>
Is this possible?
PS. This is all with Wordpress, therefore they are dynamically generated. Adding individual inline CSS with style will not work. This MUST be done in my external CSS sheet.
In your case you could treat the inner div witin a div as a child and as a result you can use this css
#container #text2 {
/* Unique Div Style */
}
It is correct that if you have an element that is being repeated a lot,, you should use a class and not an id.
If you have a lot of
<div id="text2">Some text</div>
then it should really be like this
<div class="text2">Some text</div>
If you do that then your CSS could look like this for that ONE div that you want to style differently
#container .text2 {
/* Unique Div Style */
}
Of course, provided that your container ID is unique ID.
ALSO, if you changed your code and you styled repetitive elements with classes then you could apply multiple classes to the same element..
Like so:
<div class="text2 text2new">Some text</div>
Now you could write CSS for class .text2new
.text2new{
/* make sure your css code overrides the old class*/
}
If it is important to you to have the site display correctly in older browsers multiple classes are not supported btw.
Hope this makes it clearer.
Try:
#container #text2 {
/* YOUR CSS HERE */
}
As commented above, if you want to apply the same style to multiple elements, use class instead of id. Styles could be applied to specific elements following the specified structure, which means in your case, you should be using
#container .text2 {
// styles go here...
}
If however your text2 remains an id, the style would only be applied to the first element with that particular id found.

How to change style of css for particular div?

I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element

CSS selectors apply style to all images except the first one

I thought I could do this with advanced CSS selectors, but struggling.
I have a JS Fiddle here with the below example
Basically, how can I target every image here, except the first one? I don't want to use classes or IDs, I just want to use advanced selectors, if possible.
So something like .entry-content img:first-child (although I know that wouldn't work)
<div class='entry-content'>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
<div>
<img src='http://placedog.com/400/300'/>
</div>
</div>
If you want to select all img tags except first one use :not subclass:
.entry-content div:not(:first-child) img
Working example:
http://jsfiddle.net/GrAaA/
Browser support:
:not http://caniuse.com/#search=%3Anot
:first-child http://caniuse.com/#search=%3Afirst-child
You'll need to exclude the image in the first div child, rather than just the first img child, as every img is the first and only child of its div while the div elements themselves are siblings.
To do that, you can use this selector:
.entry-content div + div img
This selects the image in every div that comes directly after another div, so your first one won't be matched.
If you have siblings other than div within .entry-content you may need to use the general sibling selector instead:
.entry-content div ~ div img
apply a style to all the images. then apply a style to the first child that negates the other styles. make sure the style for the first child is after the styles for the other images in your stylesheet so that they are applied by the browser in the correct order.
This should help
.entry-content div:first-child img {
border: none;
}​

Can we set parent element style from child style?

<div id="main">
<div id="sub">
</div>
</div>
Can I set main's style from sub's style?
Cascading Stylesheets only go (cascade) down, so they're not designed to do this at all...even in those rare cases it would be very handy if they did.
You need either JavaScript, in-line style or a different layout to get the stying you're after...but pure CSS affecting the parent isn't an option here unfortunately.
This would be possible with Javascript, but not with pure CSS.
Using CSS4 selectors, the original question could be solved with this:
li! > a.active { /* styles to apply to the li tag */ }

CSS Style Nesting - Proper Form?

I am having a problem trying to find any specific details on how to properly write CSS rules in a stylesheet where the class or ID is nested within many other IDs and styles, e.g.
.mainbody #container #header #toprightsearch .searchbox {}
So here we have a searchbox class within a toprightsearch ID, in a header ID, in a container ID, in a mainbody class.
But it appears to work properly if I omit some of the IDs.
What is the correct way of listing these?
If I include all of the parents does it make it more specific?
Can it error on different browsers if I don't include all?
And any additional information on this topic would be appreciated.
Thanks
.searchbox {}
Styles anything with .searchbox
.mainbody .searchbox{}
Styles any .searchbox that descends from any .mainbody, direct child, grandchild, quadruple great grandchild, doesn't matter.
#toprightsearch > .searchbox {}
Styles only .searchboxes that are direct children of #toprightsearch
#container * .searchbox {}
Styles .searchbox's that are grandchild or later of #container.
Here's a good document on the topic: w3C selectors
If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.
There is no correct number of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2 means a selector2 at any level inside a selector1, and you can tune that for whatever behavior you need.
In your example, you should list .mainbody #container #header #toprightsearch .searchbox if what you mean is for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxes that exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.
Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.
Id's are specific to the page. So you'd just use
#toprightsearch {
stylename: stylevalue;
}
If your looking for nested classes then the correct format is
.header .textBoxes {
stylename: stylevalue;
}
If you know the exact child of a parent then you use the > sign. So if your document was like this:
<div class="header">
<div class="menu">
<input type="text" class="textBox" />
</div>
</div>
You can use this:
.header > .menu > .textBox {somestyle:somevalue;}
This means only items with a .textBox class directly inside of a .menu class item which is itself directly below an element with a class of .header.
From the W3 Selectors Documentation:
Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.
So in short, no you do not have to include all of the parent elements, and should not cause any cross-browser problems. However, with this selector:
.mainbody .searchbox {}
The styles defined will apply to any element with a class of searchbox whether it descends directly or indirectly from an element with class mainbody.
With your proposed selector, however:
.mainbody #container #header #toprightsearch .searchbox {}
The styles defined are more specific, and so only elements that descend from an element with class mainbody, then the elements with IDs of #container, #header, #toprightsearch in that order and that have a class name searchbox will have the defined styles applied.
Theoretically, an ID should only be used for one specific item on a page. So you should only have one item with an ID of toprightsearch so, for your CSS to work you only need to indicate:
#toprightsearch .searchbox {}
because there is only one item on your page with an ID of toprightsearch, All the other selectors are unnecessary.
If you have two items on your page with an ID of toprightsearch then that is bad coding practice.
The code below does what it says (at least in Firefox). it colors the input red
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
background-color:red;
}
</style>
</head>
<body class="mainbody">
<div id="container">
<div id="header">
<div id="toprightsearch">
<input type="text" class="searchbox" />
</div>
</div>
</div>
</body>
</html>
I think you should see if there went anything wrong in spelling the ID's and classes.

Resources