I have a structure such as :
<div class='container'>
<div class='half-screen'></div>
<div class='half-screen'></div>
<div class='half-screen'></div>
<div class='half-screen'></div>
</div>
I have to add divs dynamically and I'm wondering if there's a way to create the relationship dynamically so that a bar is inserted before every two divs with the half-screen class, i.e. before every 2n+1 div.half-screen.
There may be other ways to restructure and use css for top-border on each half screen but I'm curious to know if I can solve this using the + css adjacent operator
.container {
&.half-screen + .half-screen + .half-screen {
&:before {
border-top: 1px solid #ccc;
display:block;
}
}
}
I think you were on the right track with 2n+1 and :before, just missing a couple steps, unless I'm misunderstanding. Is this what you're trying to achieve?
.half-screen:nth-child(2n+1):before {
content: '';
width: 100%;
margin: 10px 0;
height: 1px;
background: black;
display: block;
}
<div class='container'>
<div class='half-screen'>1</div>
<div class='half-screen'>2</div>
<div class='half-screen'>3</div>
<div class='half-screen'>4</div>
<div class='half-screen'>5</div>
<div class='half-screen'>6</div>
</div>
No, you can't.
I know you're thinking .a + .a + .a matches the third element with a class of a, but keep in mind it also matches the fourth element with a class of a. CSS doesn't really say "Oh, we already used that element for this selector, we won't use it again."
Related
I have a CSS-overwriting issue. There is a parent selector for a whole div which sets the styling for all inputs within. I have some inputs in it which I do want to have another styling for. Even though I put these stylings below the parents in the CSS-file, they still can not overwrite the parents css. Please see embedded CSS for further explanation. (I prefer to not use !important).
The CSS that gets applied (defined at the top of CSS-file)
#content #newPost .inner .inputs button {
width: 70%;
height: 50px;
background-color: #F7F9FA;
text-align: center;
margin: 15px 0 0 15%;
cursor: pointer;
border: 1px solid #A0A0A0;
transition: 0.2s;
}
The CSS that should get applied (defined at bottom)
#resultArray .team button {
width: 40px;
height: 100%;
border: none;
background-color: #E3E8E8;
color: #000;
padding: 0;
text-align: center;
margin: 0;
cursor: default;
}
HTML
<div id='newPost'>
<div class='inner'>
<div class='inputs'>
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
</div>
<input placeholder='Title'>
<textarea placeholder='Content'></textarea>
<button id='publishPost'>Publish</button>
</div>
So far I got from your CSS and markup code problem is chaining in CSS selection. You can try apply following selector:
#content #newPost .inner .inputs #resultArray button {
width: 40px;
height: 100%;
border: none;
background-color: #E3E8E8;
color: #000;
padding: 0;
text-align: center;
margin: 0;
cursor: default;
}
Also when you try to override long chain CSS selector you should understand properly CSS Selection Precedence rules.
How long is CSS selection chain it's dose not matter if you uderstand following precedence:
In CSS slection every selector have a mathamatical value: each tag = 1, each .class = 10 or pseudo class such as :hover, :active = 10, #id = 100, inline styling = 1000 and for !important = infinity. You can't never override one !important without another !important.
So form your first selection is "#content #newPost .inner .inputs button" = 100 + 100 + 10 + 10 + 1 = 221
But for "#resultArray .team button" = 100 + 10 + 1 = 111
So second selection will never precedence over first selection.
Also for better understanding see here.
you have extra close this div
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
</div>
remove this one and
justify you code like:
<div class='inputs'>
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
<div class='int'>
<input placeholder='Title'>
</div>
<div class='int'>
<textarea placeholder='Content'></textarea>
</div>
<button id='publishPost'>Publish</button> -->
</div>
than start work : https://jsfiddle.net/yhsLvc7g/1/
edit: wait... also there is no .team class in your html, so that selector points nowhere
--
Your first selector is WAY more specific than the bottom one, so it will be applied despite being above in the cascade flow.
You need to beat the specificity of the 2 ids, 2 classes and 1 tag of the top selector. That's A LOT of specificity, which means you need to use at least 2 ids + at least 2 classes + at least 1 tag to beat it, then the cascade will take over. Setting an additional class (so 2 + 3 + 1) or an additional ID (so 3 + 2 + 1) will beat it too.
So you need to do something ridiculous like
#content #newPost .inner .inputs #resultArray .team button
That being said, your CSS is extremely overqualified, which means you'll encounter issues like these by the millions.
What you should really be doing is changing the first selector (and all those that you have in such fashion) for less specificity, something like
.inner .inputs button
will probably do the trick
Here's a good resource to understanding CSS specificity:
My issue is that while the a tag is in the container the ":hover +" does not work. If I move the a tag outside the container it works fine. Using a basic div instead of the bootstrap container produces the correct result. Is there something that blocks this from happening in the bootstrap libraries?
HTML :
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8">
test
</div>
<div class="col-sm-4">
<div class="info">
<h1>Info</h1>
<div class="info-box">
<div class="one">one</div>
<div class="two">two</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS :
.
info{
text-align:center;
}
.info-box{
width: 70%;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.one, .two{
display: none;
}
a:hover .container
> .row > .col-sm-4
> .info > .info-box
>.one{
display: block;
}
Codepen
Because the element that you want to show when you hover over the tag is NOT a child of the element your are hovering over, it's not going to be possible to target the element via CSS.
Your best bet is to use some very simple javascript/jquery.
Since you are using Bootstrap, I'm going to assume you are loading jQuery.
Here's a codepen: http://codepen.io/anon/pen/WrMPXY
$(document).ready(function(){
$('.test').hover(function() {
$('.one').toggle();
});
});
Let's look at what the jQuery is doing. The first line simply says "when the page is loaded, do this..."
In the second line, we start by grabbing the element with a class of "test". You could also target something with an id using $('#test'). Now that we have that element, we want to tell it to do something when we hover over it.
The third line starts with the element we want to do something with, in this case the element with a class of "one". The "toggle" function is a simple shortcut to hide/show. You also could use the hide() function, show() function, or fun things like slideUp(), slideDown(), or slideToggle().
That's it. Let me know if you have anymore questions regarding the jQuery. I have no idea how familiar you are with it so I apologize if this is all obvious.
The only CSS you need is a default state of "display:none;" on the elements you want to hide and show via jQuery.
If you looking for only css solution, you have to col-sm-8:hover
.col-sm-8:hover + .col-sm-4 > .info > .info-box > .one {
display: block;
}
in this case you might reduce width of col-sm-8 block. I just added float to this class, you can have another solution!
.col-sm-8 {
float: left;
}
jsfiddle-link
Back in the 2003, when my templates where cut into a tables, I used to position all the text how I wanted.
I know it's a newbie question and I should probably take some beginner css courses, but the question is - how to position text with as little fuss as possible like that:
start at 0 px start at 100px start at 300px
For the example you post in your question, I would go about it something like this:
span {
display: inline-block;
}
span:nth-of-type(1) {
width: 99px;
}
span:nth-of-type(2) {
width: 199px;
}
<span>Start at 0px</span>
<span>Start at 100px</span>
<span>Start at 300px</span>
HTML
<div class="item start0">
start at 0px
</div>
<div class="item start100">
start at 100px
</div>
<div class="item start300">
start at 300px
</div>
CSS
.item{
float:left;
}
.start0{
width:100px;
}
.start100{
width:200px;
}
.start300{
width:100px; // example
}
Width is the best bet. If you're going to use a div, you need to float left or the divs will be pilled up.
I have some links, and each of these have a unique href.
lets say link one have href="#first".
and link two have href="#second".
What would then be the CSS to do something with a div? (with the ID box)
I have tried lots of things like:
#first:target #box{
something..
}
#second:target #box{
something else..
}
#linkOne:hover #box{ width:200px; }
This changes the size of #box by hovering #linkOne I want the same to happen with :target, like change the size of #box by clicking the link
If you want to select the currently targeted element, you can simply do :target
html
first link
second link
<div id="first">first div</div>
<div id="second">second div</div>
css
:target {
border: 1px solid red;
}
The div with the corresponding id of the link clicked will have a red border.
http://jsfiddle.net/wk3rR/2/
UPDATE
Judging by your comment, it appears you want to manipulate the same box with different current targets, which won't be straight-forward, but can be done if you nest the <div>s with the IDs and then your original css should work:
first link
second link
<div id="first">
<div id="second">
<div class="box">box</div>
</div>
</div>
css
#first:target .box {
border: 1px solid red;
}
#second:target .box {
border: 1px solid yellow;
}
http://jsfiddle.net/wk3rR/3/
If I am not wrong, you are looking for something like the below. This will set the height of the currently targeted element to 20px. Transition effect will also be applied.
HTML:
<a href='#first'>First</a>
<a href='#second'>Second</a>
<div id='first'>This is first div</div>
<div id='second'>This is second div</div>
CSS:
#first, #second {
height: 0px;
overflow: hidden;
transition: height 1s ease-in;
}
#first:target {
height: 20px;
}
#second:target {
height: 20px;
}
Demo Fiddle
EDIT: I know you haven't tagged jQuery/JavaScript and was looking for a CSS solution. But if you have many such links and are ok to have a JS based solution, you can try the below.
This script has a mapping between the id of the link that is clicked and the height that the box is supposed to have when the link is clicked. Based on it, the #box element's height is modified. Transitions will also work as can be seen in this fiddle.
window.onload = function () {
document.getElementsByTagName('body')[0].onclick = function(e){
var box = document.getElementById('box');
var heights = { first: '20px', second: '40px', third: '30px' };
if(e.target.id)
box.style.height = heights[e.target.id];
};
}
I think you need the use of javascript if you want manipulate DOM. You have to remember CSS is only for style the page, not for making actions with the elements.
Trying to change a div background color when hover over another div. But I can't get it to worked. Been seing aroud her now, but can't find a similair question.
<style type="text/css">
#main {
width: 960px;
height: 600px;
margin: auto;
position: relative;
background: red;
}
#trykk {
width: 100px;
height: 100px;
background-color: yellow;
}
#trykk:hover #main {
background-color: green;
}
</style>
<div id="main">
<div id="trykk">
</div>
</div>
Thats the code I've been using. The only problem is that I'm not allowed to use javascript. So is there any way I can change background color on div #main when I hover over div #trykk?
A demo related to Rodik's answer, as he said you cannot change select parent using a child hence you cannot change the style of parent element, but if you want you can change your markup, as you said you cannot use javascript but if you can change the markup than it will go like this
Demo1
HTML
<div id="main">Main</div>
<div id="trykk">Trykk</div>
CSS
#main:hover + #trykk {
background-color: green;
}
Or if you want to nest your div's as you are doing right now, just change the selector like this
Demo2
HTML
<div id="main">Main
<div id="trykk">Trykk</div>
</div>
CSS
#main:hover > #trykk {
background-color: green;
}
CSS selection only works one way, from parent to child.
A child's state, hence, cannot affect it's parent's state.
A javascript mouseover event will be needed to implement this type of functionality.
with jquery you could do this:
$(function(){
$("#trykk").hover(function(){
$("#main").toggleClass("greenBackground");
});
});