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
}
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}
}
}
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;
}
<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; }
I want to give a custom CSS property to the specified range of the elements identified by number in id.
HTML:
<div id="game">
<div id="game-board-field-1-street-name"></div>
<div id="game-board-field-2-street-name"></div>
<div id="game-board-field-3-street-name"></div>
<div id="game-board-field-4-street-name"></div>
...
<div id="game-board-field-11-street-name"></div>
<div id="game-board-field-12-street-name"></div>
<div id="game-board-field-13-street-name"></div>
<div id="game-board-field-14-street-name"></div>
... too many ...
</div>
CSS:
#game div[id$=street-name] { /* I want this selector to get applied only to streets 1-4 */
font-size: 10px;
}
#game div[id$=street-name] { /* This one to streets 11-14 */
font-size: 14px;
}
Is there any ways to handle it only by CSS?
You can't select directly by their numbered IDs, as CSS doesn't provide dynamic attribute selectors.
However, if your structure is such that each numbered div corresponds to its position in the #game parent element, you may be able to use :nth-child() instead:
/* First 4 elements */
#game div:nth-child(-n+4) {
font-size: 10px;
}
/* Elements starting from the 11th and ending at the 14th */
#game div:nth-child(n+11):nth-child(-n+14) {
font-size: 10px;
}