I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}
Related
Is there a way to add a horizontal line after each heading without using <hr>? I only want to add something inside <style> </style>
The correct way to add a line after a heading IS to use CSS not a <hr/> element. note that H elements are block level elements (unless you are styling them to be inline or are using display: flex on the parent container, so the border-bottom will extend the full width of thecontainer.
This can be applied individually to any h element - or to them all by combining all h elements into a single style declaration.
h1 {
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: solid 1px #e1e1e1;
}
<h1>This is a heading</h1>
You can also apply:
h1::after{
display: block;
content: '';
margin-top: 10px;
border-bottom: 1px solid #000;
}
I'd like to visually highlight a set of sibling elements that share the same attribute.
#boxed_contents span[data-boxme] {
display: inline-block;
border: 2px solid #00F;
border-radius: 5px;
}
<div id="boxed_contents">
<span>hello</span><!--
--><span>world</span><!--
--><span data-boxme>look</span><!--
--><span data-boxme>at</span><!--
--><span data-boxme>me</span>
</div>
This almost works like I want it to, but I'd like to join the boxes around each of the boxme elements, leaving just one box around all three elements. I know I can wrap the adjacent boxme elements in a wrapper div, but since this is conceptually a visual (rather than a structural) choice, I'd really like to do this without modifying the HTML.
Is there a way to do this in pure CSS? Failing that, with the addition of some straightforward Javascript?
Actually it is not possible to wrap elements in a another one by pure CSS. But we can somehow fake the effect by adding border to each adjacent element and putting an absolutely positioned pseudo-element over the middle borders.
As an aside, note that custom attributes are not valid in HTML unless they are formatted as data-*.
#boxed_contents [data-boxme] {
display: inline-block;
border: 2px solid #00F;
}
#boxed_contents [data-boxme] + [data-boxme] {
margin-left: -.25em;
padding-left: .25em;
position: relative;
}
#boxed_contents [data-boxme] + [data-boxme]:after {
content: "";
position: absolute;
top: 0; bottom: 0; left: -4px;
width: 4px;
background: white;
}
<div id="boxed_contents">
<span>hello</span>
<span>world</span>
<span data-boxme>look</span>
<span data-boxme>at</span>
<span data-boxme>me</span>
<span>not me</span>
</div>
Does this work for you?
var borderProps='2px solid #f00',borderRadius='5px',boxMeAttr='data-boxme';
var spans=document.querySelectorAll('span'),boxMeArrays=[],dummyArray=null,iterator=0;
var currSpan=null,prevSpan=null;
var i,length=spans.length,adjacentSpans=0;
for(i=0; i<length; i+=1){
prevSpan=currSpan;
currSpan=spans[i];
if(currSpan.hasAttribute(boxMeAttr)){
if(prevSpan!==null&&prevSpan.hasAttribute(boxMeAttr)){
dummyArray[dummyArray.length]=currSpan;
}else{
dummyArray=[currSpan];
boxMeArrays[iterator]=dummyArray;
iterator+=1;
}
}
}
length=boxMeArrays.length;
for(i=0; i<length; i+=1){
adjacentSpans=boxMeArrays[i].length;
for(var j=0; j<adjacentSpans; j+=1){
currSpan=boxMeArrays[i][j];
if(adjacentSpans>1){
if(j===0){
currSpan.innerText+=' ';
currSpan.style.borderLeft=currSpan.style.borderTop=currSpan.style.borderBottom=borderProps;
currSpan.style.borderTopLeftRadius=currSpan.style.borderBottomLeftRadius=borderRadius;
}else if(j===adjacentSpans-1){
currSpan.style.borderTop=currSpan.style.borderBottom=currSpan.style.borderRight=borderProps;
currSpan.style.borderTopRightRadius=currSpan.style.borderBottomRightRadius=borderRadius;
}else{
currSpan.innerText+=' ';
currSpan.style.borderTop=currSpan.style.borderBottom=borderProps;
}
}else{
currSpan.style.border=borderProps;
currSpan.style.borderRadius=borderRadius;
}
}
}
Definitely not straightforward but I think it scales well enough. And if you are OK with it, it does modify your HTML with just one bit: adding an extra space using innerText so borders could join each other nicely.
Take a look at the implementation on jsFiddle. Hope I haven't missed out any detail and really hoping this solution works for you.
Thanks to Hashem for putting me on the right track with the sibling selector (to uniquely style consecutive elements), and a pseudo-selector to add border elements.
I have had to add a line of JavaScript to ensure that there is a blank span element without the boxme attribute at the very end. By doing so, I can use the :before pseudo element on any non-boxme element following a boxme element. The main advantage to this strategy (over the one given by Hashem) is that I get to keep the rounded corners from my original CSS.
document.getElementById('boxed_contents').appendChild(document.createElement('span'));
#boxed_contents span[data-boxme] {
border: 2px solid #00F;
border-right: none;
border-radius: 5px 0 0 5px;
padding-left: 4px;
}
#boxed_contents span[data-boxme] + span[data-boxme] {
border-left: none;
border-radius: 0;
padding-left: 0;
}
#boxed_contents span[data-boxme] + span:not([data-boxme]):before {
content: "";
border: 2px solid #00F;
border-left: none;
border-radius: 0 5px 5px 0;
padding-right: 4px;
}
<div id="boxed_contents">
<span>hello</span><!--
--><span>world</span><!--
--><span data-boxme>look</span><!--
--><span data-boxme>at</span><!--
--><span data-boxme>me</span>
</div>
I'm not sure how cross-platform this solution is, but it seems to work well on my target platform of Chrome.
I have edited your code to work how you describe you want it to work, the .boxme tag in the class element applies the style whereby the boxme class is inside the #box_contents tag.
#boxed_contents.boxme {
display: inline-block;
}
#boxed_contents.borderBox {
border: 2px solid #00F;
border-radius: 5px;
}
:)
<div id="boxed_contents">
<span>hello</span>
<span>world</span>
<div class='borderBox'>
<span class='boxme'>look</span>
<span class='boxme'>at</span>
<span class='boxme'>me</span>
</div>
</div>
If you know the layout of the boxme structure, then you can use it to force by adding an extra DIV around the chosen elements.
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?