How can I select one element after a specific element? In e.g.
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
How can I select the 4 div.inner after .header without selecting first three div.inner?
FYI, I am unable to modify any HTML, I am able to modify only CSS.
EDIT
I have not made the correct question. I just need all the .inner elements after .header skipping the first n ('n' might change in the future) elements.
EDIT
Goal is to style "Foo 7" to "Foo n", inclusive.
use the general sibling selector ~ as it will only match if the sibling comes afterwards.
.header ~ .inner { }
Okay, now that the question has been edited once more, again making my previous answer looking wrong, I change my answer once more to make it fit the question:
You can use several + selectors to "count up" to the first sibling that should be affected and then add a ~ selector after that to select all following siblings with the same class:
.header + .inner + .inner + .inner ~.inner {
color: red;
}
<div class="general">
<div class="inner">Foo 1</div>
<div class="inner">Foo 2</div>
<div class="inner">Foo 3</div>
<div class="header">Bar</div>
<div class="inner">Foo 4</div>
<div class="inner">Foo 5</div>
<div class="inner">Foo 6</div>
<div class="inner">Foo 7</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo ...</div>
<div class="inner">Foo n</div>
</div>
That's the best way to get what you're looking for
I hope I get it right
.header ~ .inner
demo Link
Related
In this example http://jsfiddle.net/rodrigolinkweb/k8qg14xL/ I need to select only "Container 12", how can I do this?
ps: note that both divs have the same class name "wrapper".
.container:nth-child(n+3){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
You can select them with the .wrapper class, like this
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
<div class="container">Container 11</div>
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
If you want to select it from backwards you can use :nth-last-of-type() . Refer to the following fiddle here
No matter what content the .wrapper has :nth-child will select child based on its position where as :nth-of-type selects with appropriate attribute.
.wrapper:nth-of-type(2) .container:nth-child(2){
background-color: gray;
color:white;
}
<div class="wrapper">
<div class="container">Container 1</div>
<div class="container">Container 2</div>
<div class="container">Container 3</div>
</div>
<br />
<div class="wrapper">
Some link
<div class="container">Container 12</div>
<div class="container">Container 13</div>
</div>
In this scenario is it possible to use CSS selector to only select item 4?
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
In this exact example, yes - though if you get much more complex it's going to get ugly and you'll probably need some (relatively simple) JavaScript.
In this example just use the Adjacent Sibling selector in combination with the :not() pseudo-class. This will target any class="a" that immediately follows a div that's not class="a".
div:not(.a) + .a {
color: red;
}
<div>
<div class="a">item 1</div>
<div class="a">item 2</div>
<div class="a">item 3</div>
</div>
<div class="a">item 4</div>
<div class="a">item 5</div>
I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.
Example 1
.myDiv:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Example 2
.myDiv:not(.container1 .myDiv) {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Is this even possible with CSS? Or is my syntax just off?
You're selecting wrong elements. No reverse lookups possible, see here:
div:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:
.container:not(.container1) > .myDiv {
color: red;
}
<div class="container container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container container2">
<div class="myDiv">Div 2</div>
</div>
CSS can't do "parent lookups" like that. You would need to reverse the structure to something like:
.my-container:not(.container1) .myDiv
Granted, you would need to add the shared my-container class to all "parent" divs of interest.
How to give an empty div a minimum height equal to the text height?!
In this example there are multiple label/value pairs.. And some values are empty
How to give the empty value container a minimum height equal to the text height?
Attention
This is NOT a table layout.. Each label/value have different width
jsfiddle
http://jsfiddle.net/p2ekqomj/9/
code
<div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 1</div>
<div class="input_label_value">Value 1</div>
</div>
<div class="input_label" style="width:100px">
<div class="input_label label">Label 2</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:50px">
<div class="input_label label">Label 3</div>
<div class="input_label_value"></div>
</div>
</div>
<div>
<div class="input_label" style="width:60px">
<div class="input_label label">Label 4</div>
<div class="input_label_value"></div>
</div>
<div class="input_label" style="width:80px">
<div class="input_label label">Label 5</div>
<div class="input_label_value">Value 5</div>
</div>
</div>
<div>
<div class="input_label" style="width:120px">
<div class="input_label label">Label 6</div>
<div class="input_label_value"></div>
</div>
</div>
.input_label {
display:inline-block;
padding:2px;
vertical-align: top;
}
.input_label.label {
font-size:11px;
}
Change the display property of .input_label from inline-block to table-cell:
.input_label {
display:table-cell;
padding:2px;
}
jsFiddle example
I created the following custom table:
http://jsfiddle.net/pg92nzh2/ (live example)
<div class="table-custom">
<div class="table-heading">
<div class="table-cell">title 1</div>
<div class="table-cell">title 2</div>
<div class="table-cell">title 3</div>
<div class="table-cell">title 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
<div class="table-row">
<div class="table-cell">test 1</div>
<div class="table-cell">test 2</div>
<div class="table-cell">test 3</div>
<div class="table-cell">test 4</div>
</div>
</div>
Everything works great but I would like to be able to put a tag between rows (div, span or whatever) that won't affect the behavior of my table (the final goal is to use ng-repeat to this tag so I can have modular tables). Here is an example of what I would like to do: http://jsfiddle.net/gzdrz9mr/
I would like to put this tag preferably wherever I want without affecting anything...