targeting child html element using css - html

Following html structure is rendered
<div id="details">
<div class="col-lg-12 header-section" style="">
</div>
I'm trying to apply css using this css selector
div#details > .col-lg-12+.header-section {
margin-bottom: 30px;
}
but this doesn't work, why?

You should remove +
div#details > .col-lg-12.header-section {
color: green;
}
<div id="details">
<div class="col-lg-12 header-section" style="">DIV</div>
</div>
With your css code you are selecting element with class header-section that is next-sibling of col-lg-12 so it would work in this case DEMO

.parent .child {
/** Your css here **/
}
Very simple.

Just remove the '+'! It would work right after you do that
#details > .col-lg-12.header-section {
color: blue;
}
<div id="details">
<div class="col-lg-12 header-section">This is a div i guess LOL</div>
</div>

Use this instead:
div#details > .col-lg-12.header-section
Also, the div before #details is not necessary since you should only have one element with that id anyway, so you might think about removing that.
Here is the fiddle with background-colors instead of margin on selected item just to make the effect more visible: https://jsfiddle.net/j30hq8jt/11/

Related

How to reference the "second-child" and "third-child" on css?

I don't know how to reference the second and third child on css.
I tried change the first per second and third but don't work.
I only can reference the first and last-child
keypad :first-child :nth-child(1){
background-color: black;
}
keypad :last-child :nth-child(3){
background-color: #b22222;
}
To refer to a specific child from a parent element, do it like this
.keypad:nth-child(2)
First, in your css you should set . if keypad is the name of a class or # if it is an id. Then use :nth-child to refer the order of a child:
.keypad:nth-child(2){
background-color: black;
}
.keypad:nth-child(3){
background-color: #b22222;
}
<div class="container">
<div class="keypad">1</div>
<div class="keypad">2</div>
<div class="keypad">3</div>
<div class="keypad">4</div>
<div class="keypad">5</div>
<div class="keypad">6</div>
<div class="keypad">7</div>
<div class="keypad">8</div>
</div>
you have not used the class(.) or Id identifier(#) when calling the CSS element use :
.keypad:nth-child(2){....}
for class selectors and
#keypad:nth-child(2){....}
for Id selectors

How can I add css to a specific div on 4th level in hierachry?

How can I add css to a specific div on 4th level in the hierachry below?
`<div id="sp-top2">
<div class="sp-column">
<div class="sp-module jmoddiv jmodinside">
<div class="sp-module-content">
Welcome admin
</div>
</div>
</div>
</div>`
I want to add magrin-left to the
<div class="sp-module-content">
but without adding any other attributes on the above code.
How can I do it?
Just Include,
#sp-top2 .sp-module-content{
margin-left: 10px;
}
#sp-top2 .sp-column .sp-module .sp-module-content {
color: blue;
}
Hope this will help you.
add:
#sp-top2 .sp-module-content {margin-left:XXpx;}
Use class selector for css
for exmple-
.sp-module-content{
margin-left:100px;
}

CSS selector for numbered class/id

I have the following situation:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
...... and so on
</div>
My requirement is to access all div having id $=menu inside myMenu except menu0, as my menu can have like 10 to 15 item so one way is to do:
#myMenu > menu1 {style}
#myMenu > menu2 {style}
so on... 15 times
but as I have to give same style to all of them , it seems unnecessary , I am looking for CSS selector which will fit correctly for my requirement also having compatible to IE8.
Any help is greatly appreciated.
If you always have the #menu0 element, you can use the general sibling selector that is IE8 compliant:
#menu0 ~ [id^="menu"] {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
</div>
or use classes (along with ids) that would fit better.
This css3 rule will get the list without #menu0:
div#myMenu > div:not(#menu0)
{
}
Alternately, you can use these two:
div#myMenu > div
{
/*new values*/
}
div#myMenu > div#menu0
{
/*reset with the original values*/
}
This code will hit all the children divs, then the second rule will override the prior one because it is later in the cascade and reset #menu0 to its original condition.
You can use class but also you can:
#myMenu div[id^="menu"]:not(#menu0) {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
This one selects all id which start with word 'menu' and is child of element with id #myMenu but exclude element with id #menu0
After comment for older browsers e.g. ie8 you can use:
#myMenu div[id^="menu"] {
color: red;
}
#myMenu #menu0 {
color: #000;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
Because id is unique.
add another class:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1" class="sub">stuffs</div>
<div id="menu2" class="sub">stuffs</div>
...... and so on
</div>
and select:
#myMenu > .sub{ ... }
or simplicity
#myMenu .sub{ ... }
If, as implied from the comments to the question, it's always the first child that should not be selected:
/* selects all the <div>s with an id beginning with 'menu',
that follow a <div> with an id beginning with menu, that
are the direct-children of the element with an id of 'myMenu': */
#myMenu > div[id^=menu] + div[id^=menu] {
/* css here */
}
Or:
/* selects all <div> elements that are not the :first-child
that are direct children of <div id="myMenu">: */
#myMenu > div:not(:first-child)
/* css here */
}
Or:
/* selects all <div>s with an id beginning with menu that
have a previous sibling <div> with an id beginning with
'menu' that is the direct child of <div id="myMenu">: */
#myMenu > div[id^=menu] ~ div[id^=menu]
/* css here */
}

CSS all placeholder (*) affects my styles

This code doesn't apply the width of my div
.column-hide {
width: 16.666666666666664%!important;
}
.column-hide * {
display: none;
}
While this works
.column-hide * {
display: none;
}
.column-hide {
width: 16.666666666666664%!important;
}
Any advice?
UPDATE: HTML CODE
<div class="col-md-6 column-hide">
<div class="header-label bg-gray custom-attr-header">
</div>
<div class="fields-body">
<h4 class="pull-left">Texts</h4>
</div>
</div>
An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. So I;ll not suggest to avoid this universal selector. I felt many time if you define same property the last one applied always.
Here is the Working Example.
here is the HTML code and CSS. The last one property will apply to element.
p{color:red;}
p{color:green;} /*will take me as I am defined at last*/
<p>I'll be RED</p>
<p>I'll be GREEN</p>
As you can see the color:green applied at last so <p> element color will be green. same theory will apply in your case as well.
* {
display:none
}
will shows no element of html as * means all element.By using current posted code nothing is showing up. In order to display the content need to remove the above property

How to select an html element according to its child node attribute in css?

For example, in the following snippet:
<tr>
<td align="center">123</td>
<td class="someclass">abc</td>
</tr>
I would like select all <tr> elements that have a <td> with the class="someclass".
I am wondering if this is possible in css, without using javascript. Thanks.
What your asking for isn't possible. CSS reads left to right, meaning that you can't specify the parent element based on a childs attributes. You can do this in javascript but like you said you didn't want to use that.
Example HTML:
<div class="box">
<div class="green">
Some text
</div>
</div>
<div class="box">
<div class="red">
Some Text
</div>
</div>
Example CSS:
.box {
color: blue;
}
.box .green {
color: green;
}
.box .red {
color: red;
}
As you can see, you can select the parent element by itself but not based on a child's attributes.
Technically, you should always work outwards in. If you need a specific style to be applied on the parent you should add an extra class.
Example HTML:
<div class="box green">
Some Text
</div>
Example CSS:
.box.green {
color: green;
}
You can see in the above CSS that you can "stack" the classes to select the proper element.
Hope this helps, if you have any questions just ask. I can post a javascript variation that would be able to select an element based on child element attributes if you open a new topic for that.
To select elements with a particular class:
.someclass{
color: red;
}
I would like select all elements that
has a with class attribute
"someclass".
If by selection you mean node selection that you can only use JavaScript.
jQuery:
$(".someclass").doStuff();
But if by selection you mean CSS selection then:
CSS:
<element class="someclass"> can be selected using .someclass in CSS.