<div class="pluginTitle"><h2>Latest Posts</h2></div>
How can I set font-size:11px of <h2> elements that are children of .pluginTitle class with CSS?
Use the child selector > to select children
.pluginTitle > h2 { font-size:11px }
.pluginTitle h2 { font-size: 11px; }
Related
I have this css but I'm not sure what it means.
.container {
& * > .content {
color: red;
}
I know if I have this
.container {
&.content {
color: red;
}
It will affect elements with class='container content'
I also know, that * targets all elements and > targets direct childs.
So, this means that color: red will apply to all .content that are direct children of .container?
& * > .content this will select all elements with .content class which are direct children of any element which are children of .container
for your case use this selector: & > .content
.container {
& * > .content {
Compiles to:
.container * > .content
Or:
Any element that is a member of the class content and which is a child of any element which is a descendant of an element of the class container.
In other words: Any .content descendant of .container that is not a child of .container.
.container *>.content {
color: blue;
}
<div class="container">
<div class="content">
No match because the * doesn't match an element between .container and .content
<div class="content">
Match because the * <strong>does</strong> match an element between .container and .content
</div>
<div>
No match because this is not a .content
</div>
</div>
</div>
"direct children" is not a term used in CSS. There are children and there are descendants. There is no such thing as an indirect child.
I'm looking for a neat way to solve the given problem:
Let's say we have an article, and I want to style every h1, h2 in unless they are located in the <div ="example">
<article class="article">
<h1>Direct Child 1</h1>
<h2>Direct Child 2</h2>
<div class="example">
<h1>Example Child 1</h1>
<h2>Example Child 2</h2>
</div>
<div class="other-div">
<h1>Indirect Child 1</h1>
<h2>Indirect Child 2</h2>
</div>
</div>
Now in pure CSS the solution is simple:
.article > h1,
.article *:not(.example) h1 {
color: red;
}
.article > h2,
.article *:not(.example) h2 {
color: blue;
}
All h1s are red, and h2s are blue, unless they're within <div class=example>" - Pen
In LESS, however, I can't find a clean way to do this.
.article {
& :not(.example) {
h1 {
color: red;
}
h2 {
color: blue;
}
}
}
I'm looking for a way to add <div class=article>" direct child h1s and h2 into the mix while keeping it DRY.
I guess the main show-stopper for your attempt is the limitation of Less requiring a selector combinator (like >) to always go before a selector element (so neither & > nor > alone can work).
There's workaround however:
.article {
#-: ~'>';
#{-}, *:not(.example) {
h1 {color: red}
h2 {color: blue}
}
}
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
}
I know many inheritance questions have been asked, but each case is unique and I'm having trouble with this one.
I have some h2 elements that need to have unique styling to them but they keep inheriting properties from previously defined h2 elements.
I've tried giving them a unique class, I've tried defining css properties through JS and Jquery, nothing's working.
Here's an example of what I'm talking about:
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2>New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
Even with giving the child's h2 tag a unique class I get nowhere.
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2 class="newh2class">New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2.newh2class {
font-weight:normal;
color:green;
}
<!--or-->
h2.newh2class {
font-weight:normal;
color:green;
}
Can anyone help out?
you need to use !important value to make it so.
h2.newh2class {
font-weight:normal;
color:green !important;
}
You css should look like this
.parent > h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
check it here http://jsfiddle.net/yNFUd/
Your issue is CSS because of how your are referencing the element. Read about stacking and precedence in CSS
http://jsfiddle.net/feitla/SmUGm/2/
.parent > h2 {
font-weight:bold;
color:red;
}
.parent .child h2 {
color:blue;
}
.child > h2 {
font-weight:normal;
color:green;
}
Changing the order and how they are called will affect how they are inherited and calculated.
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;
}