I am having some problem with the first-child and nth-child function in CSS. I have some divs structured like this:
<div class = container>
<div id = 456, class = item>
<div id = header_123, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
<div id = 789, class = item>
<div id = header_124, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 789</div>
</div>
</div>
</div>
<div id = 123, class = item>
<div id = header_125, class = item_header>
<div class = text_container>
<div class="header_span">This is Item 123</div>
</div>
</div>
</div>
</div>
I want to change the left-margin of the first div with class item. I use
.item div:first-child{
margin-left: 30px;
}
This changes the div with id 456's margin, but also the margin of all the text_container and header_span. This is not what I want; what am I doing wrong?
Use the immediate child selector >:
.item > div:first-child {
margin-left: 30px;
}
Note: And I could see that you are not wrapping your attributes inside " and also an id cannot start with a number.
I want to change the left-margin of the first div with class item.
If that's the case, you need to use:
div.item:first-child {
margin-left: 30px;
}
But that gives totally a different one.
Try This
.item:first-child{
margin-left: 30px;
}
Your html has few mistakes, Try to fix it like this: Demo
Wrap class and id with " "
Remove div's that have , in between id and class
HTML:
<div class="container">
<div id="456" class="item">
<div id="header_123" class="item_header">
<div class="text_container">
<div class="header_span">This is Item 456</div>
</div>
</div>
</div>
...
CSS:
.item:first-child {
margin-left: 30px;
}
As Sanjay and Praveen mentioned you need to use :first-child pseudo-class
Related
I have the following data that I want to show.
Ideally I want the keys and values left aligned, separated with colons in the middle.
I want the result to be like the following:
key1 : value1
key2 : value2
keyAbc: Value Abc
key_N : value N
And not like the following:
key1: value1
key2: value2
keyAbc: Value Abc
key_N: value N
How to do this in CSS or SCSS, and not using HTML table?
You can use grid, making the columns take on the max width of content.
This snippet adds the colons in a pseudo element as they seem to be just a visual clue rather than part of the data.
Of course you will want probably to add some padding to suit your particular requirements.
.table {
display: grid;
grid-template-columns: max-content max-content;
}
.table > *:nth-child(even)::before {
content: ":";
}
<div class="table">
<div>key1</div>
<div>value1</div>
<div>key2222222</div>
<div>value2</div>
<div>key3</div>
<div>value3</div>
</div>
Just use the inline-block and make sure the children of the main DIV gets that too and it will automatically resize based on widest width, much like table. No need for flex.
.inline-block {
display: inline-block;
}
.inline-block > div {
margin: 2px;
padding: 1px;
}
<div class="inline-block">
<div>key1</div>
<div>keykey2</div>
<div>key3</div>
</div>
<div class="inline-block">
<div>:</div>
<div>:</div>
<div>:</div>
</div>
<div class="inline-block">
<div>value1</div>
<div>value2</div>
<div>Value3</div>
</div>
If you're using div structure, you can use display: flex and could do something like this:
.css-table {
display: flex;
}
.key {
width: 10%;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
If you don't want to specify width, you'll need use JavaScript to calculate the width and apply it inline.
let maxWidth = 0;
// Calculate maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
let currWidth = keyEl.clientWidth;
if (currWidth > maxWidth) {
maxWidth = currWidth;
}
});
});
// Apply maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
keyEl.style.width = maxWidth + 'px';
});
});
.css-table {
display: flex;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
For instance in the code
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
</div>
The elements I would want to select are marked selected, and the elements I do not want selected are marked unselected.
<div class="ofChildClass" unselected>
<div class="other1" selected>
<div class="other2" selected>
<div class="ofStopClass" unselected>
<div class="other3" unselected>
<div class="other4" unselected>Text</div>
</div>
</div>
</div>
<div class="other5" selected></div>
<div class="ofStopClass" unselected></div>
</div>
</div>
</div>
Is it possible to make a selector, or multiple selectors that would select these elements without bruteforce.
To put the question into code is it possible to do this
.ofChildClass > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass),
.ofChildClass > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass) > :not(.ofStopClass)
...
without needing to repeat.
Not sure what kind of CSS you want to apply but this behavior can be defined using CSS variables like below:
:root {
--c:initial; /* we start by initial (nothing defined, default value)*/
}
div {
outline:4px solid;
outline-color:var(--c);
padding:10px;
margin:5px;
}
div::before {
content:attr(class);
}
/* we define the color here */
.ofChildClass > * {
--c:red;
}
/* we reset the coloration again here*/
.ofStopClass {
--c:initial;
}
<div class="ofChildClass">
<div class="other1">
<div class="other2">
<div class="ofStopClass">
<div class="other3">
<div class="other4">Text</div>
</div>
</div>
</div>
<div class="other5"></div>
<div class="ofStopClass"></div>
</div>
</div>
What I understood from your question is that you need to target divs that are marked selected only. You can do this by a code like this:
div[selected]{
color: blue;
}
div{
color: initial;
}
This code target all the divs that have a selected attribute given to them. As the color property is 'inherited', I had to revert color of all the divs to initial. This is just an example, otherwise div[selected] will select all the marked divs.
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
I'm gonna select element with class but named 'path_from' etc.
Let me show you example
<div class='path_from_5_to_6'></div>
<div class='_6'></div>
<div class='path_from_6_to_5'></div>
<div class='path_from_3_to_2'></div>
I want to select element which class is start with path_from but contain '_6'
How can I do this?
You can use [class^="path_from"][class*="_6"] attribute selector
[class^="path_from"] - class starts with path_from
[class*="_6"] - class contains _6
[class^="path_from"][class*="_6"] {
background: blue;
}
<div class='path_from_5_to_6'>DIV</div>
<div class='_6'>DIV</div>
<div class='path_from_6_to_5'>DIV</div>
<div class='path_from_3_to_2'>DIV</div>
here is an example
[class*="path"][class*="6"] {
width: 100px;
height: 100px;
background: yellow;
}
<div class="path_To_6"></div>
You don't. That is what you use class and id for. class for related elements and id for individual elements.
<div class="path_6" id="path_from_5_to_6"></div>
<div id="_6"></div>
<div class="path_6" id="path_from_6_to_5"></div>
<div id="path_from_3_to_2"></div>
Then you select using .path_6 only:
.path_6 {
// styles
}
I want to change the background color of last nested element. I am using following css but it is not working
.cd-timeline > .year-wrapper > .cd-timeline-block:last-of-type{
background-color:red;
}
i also tried
#cd-timeline .year-wrapper .cd-timeline-block:last-of-type{
background-color:red;
}
What am i doing wrong can we use last-of-type element with class
Fiddle http://fiddle.jshell.net/shfh0x63/2/
<div class="timeline-wrapper">
<div class="cd-container" id="cd-timeline">
<div class="year-wrapper">
<div class="cd-timeline-block">1</div>
<div class="cd-timeline-block">2</div>
<div class="cd-timeline-block">3</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">4</div>
<div class="cd-timeline-block">5</div>
</div>
<div class="year-wrapper">
<div class="cd-timeline-block">6</div>
<div class="cd-timeline-block">7</div>
<div class="cd-timeline-block">8</div>
<div class="cd-timeline-block">change background color of this only</div>
</div>
</div>
</div>
You have use undefined selector (.cd-timeline instead of #cd-timeline - in HTML you have ID, not class). Then you need to add last-of-type to .year-wrapper too
#cd-timeline > .year-wrapper:last-of-type > .cd-timeline-block:last-of-type{ background-color:red;}
^ ^^^^^^^^^^^^^
http://fiddle.jshell.net/shfh0x63/3/
This is the easiest way of doing it using :last-child
(Demo)
.year-wrapper:last-child .cd-timeline-block:last-child {
background-color: red;
}