This question already has answers here:
What does an asterisk (*) do in a CSS selector?
(5 answers)
Closed 7 years ago.
What is the meaning of * in this code ?
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
<div class="descendants" style="width:500px;">div (current element)
<p class="1">p (child)
<span>span (grandchild)</span>
</p>
<p class="2">p (child)
<span>span (grandchild)</span>
</p>
</div>
* in CSS represents "any element".
In the above example, this will target any and all sub-elements of .descendants. Notice how the text in the first div is black, and the p and span content is grey and has a border? That is because the CSS selector is targeting those elements.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Difference between the selectors div + p (plus) and div ~ p (tilde)
(5 answers)
Closed 4 months ago.
I want to remove the bottom margin of a title only in case it has a subtitle next to it.
Probably related to Is there a "previous sibling" selector? but that question does not answer my question.
.title, .subtitle {
border: 1px solid black
}
.title + .subtitle {
background: yellow;
margin-top: 0;
}
<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>
as #blurk suggested .title:has(+ .subtitle) works in most modern (chromium + safari) browsers, + in FF accessible via flags (why people from FF do such a pervert things?)
.title:has(+ .subtitle) {
margin-bottom: 0;
}
.title, .subtitle {
border: 1px solid black
}
.title + .subtitle {
background: yellow;
margin-top: 0;
}
<header>
<h3 class="title">My title</h3>
<p class="subtitle">my subtitle: top space NOT OK!</p>
</header>
<p> some text lorep ipsum: top space OK</p>
<header>
<h3 class="title">My title</h3>
<p>my other text: top space OK</p>
</header>
Not sure that's what you need. Try this?
/*
This is a common technique called a CSS reset.
Different browsers use different default margins, causing sites to look different by margins.
The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.
*/
* {
margin: 0;
padding: 0;
}
/*
The comma groups classes (and applies the same style to them all. Just use the individually).
*/
.title {
margin-bottom: 0;
border: 1px solid black
}
.subtitle {
margin-bottom: 1rem;
background: yellow;
border: 1px solid black
}
p {
margin-bottom: 1rem;
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 11 months ago.
The community reviewed whether to reopen this question 11 months ago and left it closed:
Original close reason(s) were not resolved
Referring to this Stackover question from 2009 (Is there a "previous sibling" selector?), it seems that it was not possible then.
Here are two small examples that illustrate the problem
both elements touched by the CSS are under the triggering element.
In example two one Element is above the triggering element and the other remains below it. As a result, the sibling selector does not affect the element on top.
Example one
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="" id="nocheck">ENABLE</div>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
Example 2
.toggle-switch {
padding:50px;
}
#nocheck {
margin-bottom: 2px;
}
#chkTest:checked ~ #check { color: green; }
#chkTest:checked ~ #nocheck { color: black; }
#check { color: black; }
#nocheck { color: blue; }
<div class="">
<div class="toggle-switch">
<div class="" id="nocheck">ENABLE</div>
<input type="checkbox" id="chkTest" name="chkTest">
<label for="chkTest">
<span class="toggle-track"></span>
</label>
<div class="col-3 col-md-3" id="check">DISABLE</div>
</div>
</div>
It's the same issue as with a parent selector, CSS can only see DOWN the DOM not back up. As in it can only see future siblings, children, children of children etc.
Safari I think has implemented the :has() pseudo class in one of their dev versions but they are a small browser and Chrome has yet to implement anything.
You might get duped as a few questions on here, this is probably a useful one:
Is there a CSS parent selector?
Kevin Powell has a great video
https://www.youtube.com/watch?v=2-xdcDsqsAs
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
On hover of child, change background color of parent container (CSS only)
(3 answers)
Closed 3 years ago.
.background{
width: 200px;
height: 100px;
background: ;
}
input:checked ~ div{
background: blue;
}
<input type="checkbox" id="hamburguesa">
<label for="hamburguesa">click here</label>
<div class="background">aasd</div>
how can i dothe first result on the second snippet?
there is some way to select a father element?
i want change events using only css without js
.background{
width: 200px;
height: 100px;
background: ;
}
input:checked ~ div{
background: blue;
}
<div class="hambur">
<input type="checkbox" id="hamburguesa">
<label for="hamburguesa">click here</label>
</div>
<div class="background">aasd</div>
CSS Selector Level 4 has a selector called ":has", but it isn't compatible with any browser yet, so you'll have to use javascript/jquery for now.
:has()
This is probably the best solution you can find right now:
Is there a CSS parent selector?
This question already has answers here:
How to combine class and ID in CSS selector?
(10 answers)
Closed 5 years ago.
What does it mean in css when a class comes right after an id (there is no space between them)? such as this:
#bgimage.header-image
Thanks
It means that this formula will be used for the same element, such as
<div id="bgimage" class="header-image"></div>
If you'll make space between #bgimage and .header-image then it will be used to:
<div id="bgimage"><div class="header-image"></div></div>
It means an element with id and class at the same time. Eg:
<div id="bgimage" class="header-image"></div>
See the below example for difference between the selectors.
/* _class should be a child of _id */
#_id ._class{
background: #ccc;
width: 100px;
height: 100px;
}
/* It should have both id and class */
#_id._class{
background: #faa;
width: 100px;
height: 100px;
}
<div id="_id">
<div class="_class">
Box 1
</div>
</div>
<div class="_class" id="_id">
Box 2
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is an angular app that displays a list of movies.
Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview
In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).
Index.html:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div ng-repeat="show in shows">
<div class="rank">{{$index + 1}}</div>
<div class="img_container">
<img class="img-responsive" ng-src="{{show.series_img}}">
</div>
<h2 class="series">{{show.series}}</h2>
<p class="genre">{{show.genre}}</p>
<p class="run-start">{{show.run_start}}</p>
<p class="description">{{show.description}}</p>
</div>
</div>
</div>
</div>
The interaction of these rules is what I find particularly confusing:
div.ng-scope:nth-child(odd) h2 {
width: 400px;
}
div.ng-scope:nth-child(even) p+p {
width: 400px;
}
p {
background: #f9f9f9;
display: block;
float: left;
font-size: 18px;
height: 200px;
margin: 0;
padding: 30px;
width: 200px;
}
div.ng-scope p+p {
background: #e5e5e5;
}
div.ng-scope p+p+p {
background: #000;
color: #fff;
font-size: 14px;
width: 800px;
}
I would also appreciate any links to tutorials explaining how ng-scope works in this context.
div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.
nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.
p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.
Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?