I have the following HTML code:
<LI id=treeMenu:2 class="ui-treenode ui-treenode-leaf ui-treenode-unselected" role=treeitem sizset="false" data-nodetype="default" data-rowkey="2" sizcache0014053099738481567="771 85 282">
<SPAN aria-expanded=false aria-checked=false class="ui-treenode-content ui-tree-selectable" aria-selected=false sizset="false" sizcache0014053099738481567="771 85 282">
<SPAN class=ui-treenode-leaf-icon></SPAN>
<DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
<DIV class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
<SPAN class="ui-chkbox-icon ui-c"></SPAN>
</DIV>
</DIV>
<SPAN></SPAN>
<SPAN class="ui-treenode-label ui-corner-all">dfvc</SPAN>
</SPAN>
</LI>
I need to add a CSS rule only to LI components that with "ui-treenode ui-treenode-leaf ui-treenode-unselected" class and Besides applies for this div component that is inside on LI:
<DIV class="ui-chkbox ui-widget" sizset="false" sizcache0014053099738481567="771 85 282">
I've created the following rule but doesn't work
li .ui-treenode-leaf span div .ui-chkbox {
position: relative !important;
top: -15px !important;
}
I'm working on IE8 and this is HTML generated from node (node without leaf) of Tree component of "Primefaces" (Tree Component on showcase example)
What is the correct CSS rule?
One problem you have is that your rule is looking for a tag with class 'tree-node-leaf' within an li.
To indicate that you want to target a tag with a specific class, do not put a space between the tag and class.
li.tree-node-leaf targets an li with that class.
li .tree-node-leaf targets a tag with the class tree-node-leaf within an li.
The same is done with ID selectors, li#id targets an li with the ID of id. li #id targets an element with ID id within an li.
As Pavlo has said, you should try to keep your selectors as simple as possible - it greatly increases maintenance and reduces the chances of small mistakes becoming big problems.
Try this:
li.ui-treenode-leaf span div.ui-chkbox {
position: relative !important;
top: -15px !important;
}
It depends on what kind of hierarchy you want in the CSS selectors. If you already defined meaningful class names, there should be no need to include type selectors. It doesn't matter, if you implement ui-treenode-leafs with a div or a li element.
.ui-chkbox should already be sufficient to add styling information, unless you need different styles in specific contexts. But even then .ui-treenode-leaf .ui-chkbox should be all you need.
You also should not use !important. When you have the need to use important, you should think about your classes and about how specific your (other) selectors are.
Related
I have tried both nth-of-child and nth-of-type a few times and read documentation on w3schools, css-tricks and mdn but can't figure this out.
It has worked for me in the past but now either nothing happens or all the spans get the css rule applied to them.
I'm just trying to add extra bottom padding to the first, second and eighth with this following markup (repeated 8 times and all lis enclosed in parent ul:
<li class="campaign-links__list-item">
<a class="campaign-links__link " href="/feast-on-london-under-25" id="104014" data-analytics="Category|£25 and Under|offpage">
<img class="campaign-links__image opt-new--campaign-image" src="//img.static-bookatable.com/images/batweb/bat/sub-themes/feast-on-london/feast-on-london-under-25/hero.jpg?width=451&height=150&quality=80&mode=crop" alt="£25 and Under" width="94" height="94">
<span class="campaign-links__text opt-new--campaign-text" style="padding-bottom: 29px;">£25 and Under</span>
</a>
</li>
This is the CSS I've tried:
.opt-new--campaign-text:nth-of-child(1), .opt-new--campaign-text:nth-of-child(2), .opt-new--campaign-text:nth-of-child(8) {
padding-bottom: 29px;
}
.opt-new--campaign-text:nth-of-type(1), .opt-new--campaign-text:nth-of-type(2), .opt-new--campaign-text:nth-of-type(8) {
padding-bottom: 29px;
}
Many thanks in advance!
There's no such thing as nth-of-child, use nth-child. However you are selecting for the opt-new--campaign-text class which is a span. This span is the first child of type span, and second child of an a element.
What you're probably looking for is:
.campaign-links__list-item:nth-child(1) .opt-new--campaign-text {
padding-bottom: 29px;
}
and so on. This selects the first (in this case li) child of the ul element, finds the .opt-new--campaign-text descendant, and adds padding to it.
If I'm understanding you correctly, you're repeating the li.campaign-links__list-item block here? nth-child looks at child elements of the parent element, but .opt-new--campaign-text isn't repeated within it's immediate parent.
Something like this should work:
.campaign-links__list-item:nth-child(1) .opt-new--campaign-text, .campaign-links__list-item:nth-child(2) .opt-new--campaign-text, etc...
So.. I have this code:
<div id="slider">
<div class="current"><img id="img1" src="http://i.imgur.com/gWGqZly.png" /></div>
<div><img id="img2" src="http://i.imgur.com/mC1FD81.png" /></div>
<div><img id="img3" src="http://i.imgur.com/HFx9mqa.png" /></div>
</div>
As you can see the first div have a class named "current" and that's the div that i want to select. The divs are positioned on top of eachother with position: absolute;
My CSS:
#slider div {
position:absolute;
z-index: 0;
}
#slider div.previous {
z-index: 1;
}
#slider div.current {
z-index: 2;
}
I'm trying to give the first div, the one with class "current" a z-index of "2".
The selector i use for doing this is:
.current {
z-index: 2;
}
But that doesnt seem to work, that way the image wont appear on the top.
But if i instead write the selector this way:
#slider div.current {
z-index: 2;
}
Now it works.
And im a bit confused by this, doesnt those two selectors basically work the same way? What's the difference between them in this case?
Made a jsfiddle out of this https://jsfiddle.net/x1L4tfw4/5/ If you remove the "#slider div" part from the css selector you will see the difference.
You haven't stated that you have the #slider div selector in your CSS as-well.
This overrides the .current selector because its more specific.
This is a specificity issue. #slider div has a specificity of 101. #.current has a specificity of of 10.
#slider div.current comes in at 111.
The selector with the highest specificity is the one used. Now, how did I get those numbers?
The CSS standard says that you add numbers with an infinitely large base together to get it. In practice, you can think of it as being digits.
Tag names are worth one point.
Class names or attribute values are worth ten* points.
ID names are worth 100 points.
(and !important things are worth 1000 by the way).
So you add them up and see which has the highest number. That's the rule that gets applied. If two rules come with the same specificity, the one that appears last in the source code is the one that is used.
I said ten here for simplicity, but remember that the spec said infinitely large base (though browsers actually use base 256, fun fact). So ten classes do NOT equal one ID: a single ID is more specific than any number of classes (in theory).
The way you did the CSS is quite confusing . I Think you know that , these CSS do respect a straight forward system for ID and Class . Javascript Does care about ID . And Browser has their specific advantages for ID's . But CSS doesn't care about ID and class. Not until you pull this type of confusion .
Never use #id element .class in your stylesheet if you have more than one same <element-tag> in your markup. This will ruin the style .
This is due to the CSS specificity in the selectors that you're providing (or perhaps a third party library is providing). Here is a good resource to understand how CSS specificity and inheritance works.
Summary
Here is the key part from the linked article relating to how the different CSS selectors are related:
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
I've included their examples below to help understand how this works:
p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)
Your Scenario
Now for your particular case. The first selector you use is .current which according to the information above has a specificity of:
.current (0,0,1,0)
As #Admir Geri noted in his answer, you also have a selector #slider div which has a specificity of:
#slider div (0,1,0,1)
Since the specificity of your second selector outweights that of the first, the second takes precedence and therefore you don't see your changes.
Your last selector #slider div.current has the following CSS specificity:
#slider div.current (0,1,1,1)
Since this score outweights that of any other selector. Your changes will be displayed when using this selector which is why you see them on the screen.
Can anyone explain me what does the below css do?
.validate-error .validate-error {
color: #cc2424;
display: inline-block;
margin-top: 5px;
}
.make-switch + .validate-error {
margin-left: 10px;
}
In the first css i see the same class name used twice?. Is this css valid?. I came across this thread
What is the difference between the selectors ".class.class" and ".class .class"?
but unsure whether its applicable if we use the same class name twice?.
The first one styles child elements/descendant with the same class name:
<div class="validate-error">
This color may be different from #cc2424
<div class="validate-error">Has color #cc2424</div>
</div>
This means: The styles are applied/overwritten for child elements with the same class name.
The second one styles siblings:
<div class="make-switch"></div>
<div class="validate-error">Has left margin</div>
<div class="validate-error">Has no left margin</div>
That means: Only if .make-switch is followed by .validate-error the styles are applied to .validate-error.
Demo
Try before buy
.validate-error .validate-error {
...
}
This css targets a class .validate-error that is a descendant of .validate-error.
For example
<div class="validate-error">
<div class="validate-error">
</div>
</div>
Next css targets the class .validate-error when it is right next to .make-switch
.make-switch + .validate-error {
...
}
when selector parts are stuck together without whitespace it means it should all match the same element.
example: (should only match an element having both validate-error and other-class as classes)
.validate-error.other-class
when there is whitespace between them you are selecting an element that has other-class as a class and has a parent element with the validate-error class
the + in your second selector actually means you don't want a child of make-switch but you want the sibling element, but only if it has class validate-error
Yes it is valid. There are no rules in CSS preventing a class name appearing multiple times in a complex selector. There are no rules in HTML preventing two elements, one of which is a descendant of the other, from sharing membership of a class.
Id only should be unique, but classname we can use multiple times.
I need a create 2 elements within a block but for some reason the "Name" & "Bob" gets moved to a different line.
html
<div class=".div" style="padding-left: 50px">
<h3 style="padding-right: 5px;float: left;padding-bottom: 23px;">Name:</h3>
<span class="pt_name" style="block">Bob</span>
</div>
css
#div{
height:100px;
width:100%;
background-color:green
}
fiddle
http://jsfiddle.net/LMKw7/
The h3 has implicit margin-top from the browser's default stylesheet, which is pushing it down. Just set margin-top: 0 and you'll see an improvement.
Also, I'd recommend using CSS rather than inline styles.
You gived the styles to a div with an id div because you used # at the beginning.
If you want to add it to every div, simply use div { ... }.
Use display:inline-block;
Also because of different font-size that <h3> and <span> has it appears that text within <span> is on new line.I have edited your fiddle.May be this may help you:
http://jsfiddle.net/LMKw7/2/
Two things:
I had better luck setting "display: inline-block;" on the h3, rather than "float: left".
As for the "div" thing - you might confuse yourself by naming your selectors after element types. Anyway, classes generally don't have dots in them - the dot is just placed in CSS to select by class. The # tag is meant for IDs. So, the correct look would be this:
<div class="myDiv" ...
(CSS):
.myDiv {
I have very limited knowledge of coding, html/css, but I have a problem which makes me want to learn more. Anyway, I want to change the font-size inside a <span>, nested inside the code of the page. The complete code-snippet looks like this:
<span style="font-size: 11px;">Buy</span>
I want to change that to font-size:14px;. But, since there is no class/ID, just a <span>, I don't understand how to change it. And as I said, it's deep within the document and there are at least 20 divs or some wrapped around it.
Is there a way to target that span, and maybe get the "path". I've been fiddling with Developer Tools in Chrome but I really don't see how XPath can help me?
To sum it up - how do I overwrite inline css (without a class or ID), from an external css?
Thank you.
Sorry if you have already tried this but !important in your css declaration will override any css declarations
You can declare a property as final( in my word ) as below.
Try this in external:
selector {
font-size: 14px !important;
}
You need to have an id to change that particular span's font size. If you change for span than it will affect all spans in the document. Or if the span has a parent element you can select that
.parent span {
font-size:14;
}
update
needs to have !important to override the inline rule.
but who uses inline rules anyways. you shouldn't.
Add a class to it and then target
<span class="target">Buy</span>
Adding a "new" class wont hurt
You cannot target it without a class directly.. maybe the parent div has a class then
<div class="parent">
<span style="font-size: 11px;">Buy</span>
</div>
.parent span{
font-size: 18px !important;
}
You will ahve to use !important to override the inline css.. also keep in mind that this will effect all span inside a div with class of parent
<div style="background: red;">
The inline styles for this div should make it red.
</div>
We can fight that with this:
div[style] {
background: yellow !important;
}
Of course just add a class to the div before [style] to change the div with class you added.
example:
div.myclass[style]