How to select the element in a tree structure? - css

HTML:
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
SCSS:
.item{
background-color:skyblue;
#for $i from 1 through 4{
&:nth-child(#{$i}){
margin-left:$i * 10px;
}
}
}
The nth-child(3) doesn't select that.
I try to use nth-of-type, but it's only take nth-of-type(1).
Do I need to add a class in every .item ?


The correct way is to use the space since you are talking about children and not siblings
div div div {}
div div div{
background: red
}
<div class="item">
首页
<div class="item">
项目
<div class="item">
招贤
<div class="item">
联系
</div>
</div>
</div>
</div>
To use nth-child you will have to change the markup structure
div:nth-child(3){
background: red
}
<div class="item">
首页
</div>
<div class="item">
项目
</div>
<div class="item">
招贤
</div>
<div class="item">
联系
</div>

Related

Css select first child inside another childs

I am trying to select the first child inside some other elements.
This is the example.
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS</div>
</div>
<div class="feature">
<div class="required">NOT THIS</div>
</div>
</div>
I want to select first occurrence of required. And also there can be arbitrary numbers div with .feature ( with .some) before i get to div which contains .required .
Can this be done ?
What i tried. (not working)
.parent .required:first-child {}
.parent .required:first-of-type {}

.parent .feature .required:first-child {
color: red;
}
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS</div>
</div>
<div class="feature">
<div class="required">NOT THIS</div>
</div>
</div>

You need to add a separate class for this. .parent .feature .required:first-child will work for the first childs of required class. In your code <div class="required">I NEED TO SELECT THIS</div> and <div class="required">NOT THIS</div> both are first childs of .parent class.
So if you have at least two child of class then following works.
.parent .feature .required:first-child {
color:red;
}
<body>
<div class="parent">
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="some"></div>
</div>
<div class="feature">
<div class="required">I NEED TO SELECT THIS (First child)</div>
<div class="required">NOT THIS(second child)</div>
</div>
<div class="feature">
<div class="required">NOT THIS (This is also first child)</div>
</div>
</div>
</body>
Hope you will understand the problem.

Menu container width is smaller then the content

I am using Semantic-UI in project. When resize a window, the width of the menu container becomes smaller then the menu items width.
You can see this effect on the Semantic-UI example page
Sample code.
body {
overflow: auto;
}
.big.block {
width: 1000px;
height: 100px;
background: red;
}
<div class="ui grid">
<div class="row">
<div class="sixteen column">
<div class="ui floated left main mini menu">
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
<div class="item">
some item
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="big block">big block</div>
</div>
</div>
</div>
Example in the JSFiddle
How to fix this?

How can I select a range of elements following a specific (.selected) element that has a different parent element?

As you can see, there are .row elements that are parent to .cell elements.
I have a selected element inside a .row element, I want to target:
An element that is a child of the parent element that follows the parent containing .selected
Is this possible in CSS only?
Assume I want to select the second .cell of the parent next to the parent containing .selected
How do I turn the background color of the div containing the number 13 green?
.row .cell.selected {
background-color: red
}
.row .cell.selected+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
background-color: red;
}
#month-view .row .cell.selected+.cell {
background-color: yellow;
}
.row {
padding: 50px;
}
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
/div>

If I understood your question you want that the cell that gets a ".selected" class in the first row gets a styling in a cell in the same position in the second row.
That is not possible with CSS only, just using JS. CSS can't give you the index position of your ".selected" cell.
If you want a solution that is pure HTML and CSS I recommend you to add a second class like ".selected-column" to the next rows and style after this.

Not possible in CSS as you can't go backwards/up the DOM in CSS. But in case you can use JS or jQuery, here's a way. It's pretty easy and intuitive with jQuery using $.parent(), $.next(), and :nth-child.
$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');
.row .cell.selected {
background-color: red
}
.row {
padding: 50px;
}
.green {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
</div>

How do I apply a a rule if the div is contained in a a certain container

<div class="wrapper">
<div class="phoo">
<div class="thing">
hello
</div>
</div>
</div>
<div class="wrapper">
<div class="bar">
<div class="thing">
hello
</div>
</div>
</div>
I want to hide "hello" when the class is bar.
I thought I needed to add a & sign like this but it doesn't work. It's frustrating because I know the documentation is there somewher, but I just don't know what to call this situation.
.wrapper {
.bar & {
.thing {
display:none;
}
}
}

.wrapper > .bar > .thing
{
display:none;
}
<div class="wrapper">
<div class="phoo">
<div class="thing">
hello
</div>
</div>
</div>
<div class="wrapper">
<div class="bar">
<div class="thing">
hello
</div>
</div>
</div>
Worked for me.

how to put content in webkit column horizontally

how to put content in column horizontally like below,
(column1) (column2) (column3)
1.asd 2.asd 3.asd
4.asd 5.asd
this flow is required in the website

For columns in css3, you have to have a div structure for that...
Html:-
<div class="table">
<div class="column">
<div class="row">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="column">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="column">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
</div>
Css:-
.table { columns:3; -webkit-columns:3; -moz-columns:3; text-align:center }
.column { }
.row { background-color:red; }
Demo:- http://jsfiddle.net/5P9c4/1/

Resources