I need to style some child elements in the dom but only if they are not a child of a specific element. as an example i need to bold the text in the span in this
<span class="a">
<span class="b">
<span class="c">
bold this test
</span>
</span>
</span>
but not in this
<span class="a">
<a class="SomeOtherclass">
<span class="b">
<span class="c">
not bold
</span>
</span>
</a>
</span>
I dont have control of the output so i cannot change the class names or structure
You want to use the direct descendant selector >. The selector a > b will select b only if it is a direct descendant (ie. child) of a.
jsFiddle
.a > .b > .c {
font-weight:bold;
}
You could have an overriding rule for the special case, so for example:
.c {
font-weight: bold;
}
.SomeOtherClass .c {
font-weight: normal;
}
I have assumed that in the normal case, you don't always have the a, b, c nesting - which is why you are asking to apply this rule except in a particular case.
You can use Child-of selector for it...
For example,
.a { /*Your Style*/ }
.a > .b { /*Your Style*/ }
.a > .b > .c { /*Your Style*/ }
the best way for this is
span.a>a.SomeOtherclass>span.b>span.c{
font-weight: bold
}
this will be applied to the particular class of particular parent only. Not in the other case.
if you want to reverse it, then it will be like this
span.a>span.b>span.c{
font-weight: bold
}
it will not be applied in case of you add anything(any tag) in between this hierarchy of DOM.
This will do .. :)
Daniel is Right
and if you need second option than
you can do this
.c{
font-weight:bold;
}
.SomeOtherclass .c{
font-weight:normal;
}
Related
Is this what the css selector would do for the following div section?
.grid-row .col-6 {
font-weight: bold
}
html:
<div class="grid-row">
<div class="col-6">
blah<br/>blah2
</div>
</div>
No. For nested selectors you must use a descendant selector that is given by a white space:
This targets the nested element at any hierarchy level
.grid-row .col-6
{
font-weight: bold
}
or you can use a child selector that is given by a > sign:
This targets only the direct child of an element
.grid-row > .col-6
{
font-weight: bold
}
In the following code I want to add styling specifically to the content of the last "B".
<div class="A">
<div>
I am <span class="B">foo</span>.
</div>
<div>
I like <span class="B">bars</span>.
</div>
<div>
Actually, call me <span class="B">FOOBAR</span>.
</div>
</div>
I have been trying
.B:last-of-type { color: red; }
and all classes "B" get selected because it uses the last occurence in it's immediate parents child elements. i.e. in it's direct siblings
Is there any way to only select the last occurence of "B" in the whole document?
You can do it like this
.A div:last-of-type .B { color: red; }
Fiddle Demo
or
.A div:last-child .B { color: red; }
Fiddle Demo
Try this JsFiddle Demo
.A div:last-child .B{ color: red; }
Found the answer! CSS3 get last element
I was doing a version of this but I found it ugly, I guess this is the only way. I will keep this Question open for a bit to see if anyone has any better suggestions.
.A span.B:last-child
{
background:#999;
}
.A div:last-child .B:last-child
{
background:orange;
}
Consider the following HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
Adding the following CSS colors only "World" in red, as expected:
.c .b {
color: red;
}
But, adding the following CSS instead colors both "Hello" and "World" in red:
:not(.a) .b {
color: red;
}
Why?
You need to give it like this:-
Demo
div:not(.a) .b {
color: red;
}
Pseudo-class :not
Syntax is selector:not(){ properties }
Since the :not pseudo-class represents an element that is not represented by its argument,
you have to specify the element you want to exclude before the :not selector
Per your example, try this instead:
div:not(.a) .b {
color: red;
}
I have something along the lines of this
<div class="menu" style="background-color: transparent;">
<div class="button">
<div class="divider" style="background-color: transparent;"></div>
<a id="apple" class="unselect select" href="/apple">
<span class="apple1">Apple</span>
</a>
</div>
<div class="button">
<div class="divider"></div>
<a id="orange" class="unselect" href="/orange">
<span class="orange1">Orange</span>
</a>
</div>
....
this gives me the first divider
css=div.menu div.button div.divider
I am trying to access the 2nd divider. I have the need to access the buttons as well. I tried reading through the the nth child stuff and noticed that it is not compatible with IE.
Is there a CSS selector to locate the 2nd/3rd child or descendant (of a given class/id) under an element (with a given class/id)?
I am using xPaths now
//div[#class='menu']/descendant::div[contains(#class,'divider')][2]
it works but I want to migrate this to CSS.
The adjacent sibling selector + is able to do that and is compatible with IE7+
Fiddle demonstrating its use with 4 buttons: http://jsfiddle.net/AgNwu/
(no need for "div" if you rely already on id/class everywhere. If you call something "button", expect it to be a link, an input[type="submit|image|button|reset"] or button element ;) )
CSS
.menu > .button {
border: 1px solid darkblue;
padding: 10px;
margin: 5px 0;
}
.menu > .button + .button .divider {
background: Tan;
}
.menu > .button + .button .divider:after{
content: " (2nd or more)";
}
.menu > .button + .button + .button .divider {
background: yellow;
}
.menu > .button + .button + .button .divider:after{
content: " (3rd or more)";
}
edit: adjacent sibling, I thought this was sibling vs. general sibling
You can replace + by ~ (general sibling) if you have other type of nodes in-between your .button nodes/elements. This'd be the equivalent of :nth-of-type that would still work in IE7+
You can write like this:
div.menu div.button + div.button div.divider{
color:red;
}
Can we write selectors by only name
For example,
<div name= "outer-name">
<img name="inner-image" src="images/ine.jpg" alt"" />
</div>
I want to take style of inner-mage in css file like [outer-name] [inner-image]
In CSS file
[outer-name] [inner-image] {
/*styles*/
}
I cant take selector as [outer-name] img etc .. only selecting by name
You can use attribute selectors:
[name="outer-name"] [name="inner-image"]
But keep in mind that name is not a valid attribute for <div> or <img>, even though the above selector will work. It's best that you either change them to classes, or if you're using HTML5, add the data- prefix to them, so it looks like this:
<div data-name= "outer-name">
<img data-name="inner-image" src="images/ine.jpg" alt"" />
</div>
Then use this selector:
[data-name="outer-name"] [data-name="inner-image"]
Given the following html:
<div data-name="something">
<p>Content in 'something'</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name] [data-someAttribute] {
display: block;
background-color: #ffa;
}
This is perfectly valid (or, at least, it's implemented in Chromium 14/Ubuntu 11.04). I've changed from using name attributes (since they're invalid for div elements, or other non-form elements), and used, instead, data-* prefixed custom attributes, which are valid in HTML5 and, while perhaps not 'valid' in HTML 4, they seem to be understood by those browsers still.
JS Fiddle demo.
It's worth noting that you can also use attribute=equals notation, to select only certain elements based on the value of their data-* attributes:
<div data-name="something">
<p>Content in data-name='something' element.</p>
<span data-someAttribute="someAttribute">Content in 'someAttribute' div.</span>
</div>
And the CSS:
[data-name] {
background-color: red;
}
[data-name="something"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
Also, if CSS3 is an option for you, it's possible to use attribute-begins-with (^=) notation:
[data-name] {
background-color: red;
}
[data-name^="s"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
JS Fiddle demo.
And attribute-ends-with ($=) notation:
[data-name] {
background-color: red;
}
[data-name$="ing"] {
font-weight: bold;
}
[data-name] [data-someAttribute] {
background-color: #ffa;
text-decoration: underline;
font-weight: normal;
}
References:
data-* attributes (W3.org).
data-* attributes, (HTML5 Doctor).
attribute-equals selector (W3.org).
attribute-starts-with, and attribute-ends-with selectors (W3.org).
As #Bolt said, name isn't valid there (yet it still works on my browser). You can use the HTML5 data- properties. Here's a fiddle showing how it's done.
The real solution here would be to use classes, but I assume you have a reason for not using them.