I need to use CSS to remove a horizontal line.
Here's the HTML:
<div id='page'>
<div id='header'>
</div>
<hr>
</div>
I tried using:
#page hr:first-child{display:none;}
But that doesn't work. I need to display other hr's so I can't just remove them all. I need to target just this one.
try this one
#page hr:first-of-type{display:none;}
this will hide the first hr that is a child of #page
Do it without :first-child (the first child of #page is #header)
#page > hr {display:none;}
<div id='page'>
<div id='header'>
</div>
<hr>
</div>
Note: The > isn't really necessary - it's just a bit more precise
Note: If there is more than one hr inside the same parent, you can use #page > hr:nth-of-type(x) {display:none;} , with x being the count for the hr inside the parent
Related
I have added the "clear:both;" css command to my responsive theme,however it doesn't work,elements wrap around my block.
Here is the HTML of my block:
<div id="block-views-categories-normal-view-block-1" class="block block--views contextual-links-region block--views-categories-normal-view-block-1">
<div class="contextual-links-wrapper contextual-links-processed">
<div class="block__content">
<div class="view view-categories-normal-view view-id-categories_normal_view view-display-id-block_1 view-dom-id-4d6cdd2580eef8f5826096ea0f8157c1">
<div class="view-content">
<div class="responsive-table-wrapper">
<div class="responsive-table-scroller">
<table class="views-view-grid responsive-table-processed">
etc
I have tried
#block-views-categories-normal-view-block-1{
clear:both;
}
and
.views-view-grid {
clear:both;
}
Am I missing something?
Need to see some more code and corresponding CSS to answer.
My guess is that you're not clearing the float of the proper element.
By putting clear: both on the table class, you're telling it to clear the float of some child table elements.
Unless you altered the display property of the table elements, your clear is in the incorrect place.
You need to clear the parent of your floats to fix the painting issue in the browser.
I have this html code:
<div class="form-group well">
<p>...</p>
<hr>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
<div class="select-skill">
...
</div>
</div>
And i want to set a style using css3 to second child that has select-skill class, but i cant use .select-skill:nth-child(2), It doesn't work.
I know the solution is to remove <p>...</p><h1> or move select-skill to a new parent.
Is there any solution to select this element without adding any code of html?
JSFiddle
You can use this:
.select-skill:nth-of-type(2){
background:red;
}
Or if there are more in different div's, you can do:
.form-group .select-skill:nth-of-type(2){
/*styles*/
}
instead.
Here is the html I am working with. I want to write a css selector for the Item with text "DESIRED ELEMENT":
<div class="TopDiv">
<div class="container">
<div class="row">
<div class="span2">
<strong>Text1</strong>
</div>
<div class="span3">Text2</div>
<div class="span2">
<strong>Text3</strong>
</div>
<div class="span3">DESIRED ELEMENT</div>
</div>
<div class="row">
<div class="span2">
<strong>Text4</strong>
</div>
<div class="span3">Text5</div>
<div class="span2">
<strong>Text6</strong>
</div>
<div class="span3">
<div>Text7</div>
<div>Text8</div>
<div>Text9</div>
<div>Text10</div>
<div>Text11</div>
<div>Text12</div>
<div>Text13</div>
</div>
</div>
</div>
</div>
I am having a lot of trouble getting to the div that that I want because I don't completely understand the nth-child of type this or that or getting a child of a child.
I just want something that is nice and short that will retrieve the 4th div tag child of the first row after container.
The selector depends on if that is the order your elements are always in?
Anyway, you could use:
.row:first-child > .span3:last-child
This will select the last element with the class .span3 which is a child of the first .row.
jsFiddle here.
If you want to support last-child in IE8 and before, there is always Selectivizr.
One selector that should work in IE7/IE8 could be .row:first-child > .span3 ~ div.span3.
Only use this though if there are exactly two elements inside a row with the .span3 class.
jsFiddle here.
If it's not the last, but always the fourth, use .row:first-child > div:nth-child(4).
jsFiddle here.
the 4th div tag child of the first row after container.
The css translation of that will be:
after container
.container >
of the first row
.row:first-child >
the 4th div tag child
div:nth-child(4)
so in one line:
.container > .row:first-child > div:nth-child(4)
find the container class and in childs find the first row class and inside find the 4th div tag.
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.
I would like to change the style of all the entries following a certain div. See example. Is this possible with child selectors? Thanks!
<div class="wrapper">
<div class="entry">content</div>
<div class="entry">content</div>
<div class="CHANGE">content</div>
<div class="entry">content</div>
<div class="entry">content</div>
</div>
This selector :
div.CHANGE ~ div {your rules;}
For elements directly under div.wrapper.
div.wrapper > div {your rules;}