How can I select multiple IDs in CSS? For example:
#test_id_*{
}
<div id="test_id_10"></div>
<div id="test_id_11"></div>
Use an attribute selector
on the id attribute:
[id^='test_id_'] { color: red; }
Description:
[attr^=value] represents an element with an attribute name of attr and whose first value is prefixed by "value".
To use one css for multiple id or class, you need to separate them with ,
#test_id_10,
#test_id_11
{
//some style
}
If you want add same style to multi div, it's better to use class, but if you have your own reason for this, the better way is to wrap all your div's on one div:
<div class="wrap">
<div id="id1">
<p>
First Div!
</p>
</div>
<div id="id2">
<p>
Second Div!
</p>
</div>
<div id="id3">
<p>
Third Div!
</p>
</div>
</div>
and set your style like this in your CSS:
.wrap > div {
color:blue;
}
If they have the same style, then why can't they have the same class?
.iknow{
width: 50px;
height:50px;
background-color: aqua;
border: 1px solid red;
display: inline-block;
}
<div id="test_id_10" class="iknow"></div>
<div id="test_id_11" class="iknow"></div>
<div id="test_id_12" class="iknow"></div>
<div id="test_id_13" class="iknow"></div>
<div id="test_id_14" class="iknow"></div>
<div id="test_id_15" class="iknow"></div>
<div id="test_id_16" class="iknow"></div>
<div id="test_id_17" class="iknow"></div>
<div id="test_id_18" class="iknow"></div>
<div id="test_id_19" class="iknow"></div>
<div id="test_id_20" class="iknow"></div>
<div id="test_id_21" class="iknow"></div>
You have to pass it like following
#test_id_10,#test_id_11{
}
You can separate them by commas to apply css on multiple ids.
<div id="test_id_10"></div>
<div id="test_id_11"></div>
You can select them by:
#test_id_10, #test_id_11 {
// your css values
}
#test_id_10 { //your styling }
Here is the basics in W3 schools https://www.w3schools.com/cssref/sel_id.asp
Related
Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.
<!---hide sibling2--->
<div class="parent1">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent2">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
.parent {
height: 100px;
border: 1px solid;
}
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
I have layout that is generated dynamically so order of elements could change. Each element that is part of this layout has its own different class. I want to be able to select element of certain class but only if it is last child of its parent to apply styling. If element with different class is last child of its parent, it should not be selected. Is it possible to have this kind of scss selector and achieve this functionality without using javascript?
Example:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
I want to select element with class child3 only if it is last child of div with class parent.
So if child2 class element is last child of div class parent it is not selected, for example here:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Yes, and this is the normal CSS behaviour. You can do something like this:
.parent .child3:last-child {}
This is a rule that selects:
a .child3 element inside .parent.
.child3 element comes as the last, there's no other elements after that including text.
For SCSS, you can do something like this:
.parent {
.child3 {
&:last-child {
// Rules.
}
}
}
Example Snippet
.parent .child3:last-child {
background: #ccf;
}
<strong>Trial 1</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Preview
You can select elements by their attributes, so something like this would achieve your goal.
.parent div {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px black;
}
.parent div:last-of-type[class="child3"] {
background-color: red;
}
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
https://www.w3schools.com/cssref/css_selectors.asp
Imagine the following HTML:
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
Now, we all know that we can use CSS to make this a two-column table:
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.contestant, .score {
display: table-cell;
}
This will render the contestant’s name and country within one cell, and the score in another.
What I want is to be able to have three columns, with the name, country, and score, but without changing the HTML. Is this possible?
In other words, ideally, I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
This is what display:contents; will do (https://caniuse.com/#feat=css-display-contents)
causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.score,
.name,
.country{
display: table-cell;
padding:10px;
}
.contestant {
display:contents;
}
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
I have a nested structure that contains the same elements. To only target the elements within the current set I do something like this:
.set1 > .content > .trigger {
background: red;
}
In real life this selector has much more elements. While it works, if I change the name or depth on one of the elements it will no longer work.
Is there a way to just find the .trigger (in this case) of the current set?
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
<div>
</div>
<div>
You can apply a style on all triggers inside the current set and then remove the style for the other triggers that comes after the first trigger.
div {
padding: 5px;
border: 1px solid;
}
.set1 .trigger {
background: red;
}
.set1 .trigger ~ .set .trigger {
background: none;
}
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
</div>
</div>
</div>
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box