This question already has answers here:
What does this symbol mean in CSS?
(1 answer)
What does "*" mean in CSS?
(9 answers)
Closed 4 months ago.
div * + * {
margin-top: 1em;
}
I have seen this selector a lot.
I know div * means to select all the children
+ means to select all the siblings after that element
But what does it means to use * + *?
Explanation
When you use the + character, you should focus on the end of your combinator statement, in this case the last * character in div * + *.
div * means all elements in the div. div * + means adjacent elements of all elements in the div. div * + * means all adjacent element of all elements in the div. To wrap this up, All element in the div tag that proceed other elements must receive a top margin of 1em. For more explanation on this The lobotomized owl selector
Related
This question already has answers here:
Select all block level elements with css
(4 answers)
Closed 2 years ago.
By default, most browsers will add a top and bottom margin of 1em to many block elements, like ol, ul, blockquote, h1, h2, etc.
Is there any short and clever selector that can change theses vertical margins (let say to 1.45em) all at once, without having to list every element in the CSS file?
Note: This question have been marked as a [duplicate.] But I am not trying to select all block elements by their properties (which I know is imposible in CSS), nor do I want to select all block elements by listing them one by one. I am concern in creating an equal vertical (top and bottom) margin in all elements that by default create a new line, by using the simplest selector posible.
The best way I have found so far is to use the Universal Selector:
:root {
--custom-vertical-margin: 1.5rem;
}
* {
margin-top: var(--custom-vertical-margin);
margin-bottom: var(--custom-vertical-margin);
}
Even though the Universal Selector will also target inline elements, these are not and will not be affected by vertical margins.
This accomplishes what the question is about: to set equal vertical margins on any block element at once, without having to list every element [with display:block property] in the CSS file, nor by trying to target elements by their properties (which is imposible in CSS).
I have a parent element and it has column-count: 2 and i want the last p element in this container to take up the entire width of the parent container. But the column-count: 2 forces the last p element to appear in the 2nd column.
See here: https://image.prntscr.com/image/0b84d54f6c894b4183dd3d33205a9a43.png
Is there such a thing as a clear: both for column-count like how it would be used in floats?
Target the last p element using:
.columns-2 .p:nth-last-child(1){ column-span: all }
column-span property lets you specify how many columns the element should span.
If you want to add styles to the last element, you can use this selector
.columns-2 .p:nth-last-child(1){}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
How can one select all divs which have a child whose class is "test-class"?
Wow, this marked as duplicate of Is there a CSS parent selector?. I read that question and this question is really a duplicate... however, I and I suppose no one will find that badly titled question if she/wants to do what I am described in my title.
1) CSS has parent selector but we are seeking from something else
2) That question title would be Is there a CSS child selector?
EDIT: for clarity of the readers, the original question was
How can one select all divs that are inside a test-class and which have a child ?
You can't, because in CSS there are not (yet) Parent Selector nor Previous Sibling Selector.
You can only target Next Siblings or Childrens (and then Descendants)...
only right and down, no left and up.
As a note, please do not use W3SChools when possible (read why), and for Selectors refer to W3C Official Documentation:
CSS2 Selectors
CSS3 Selectors
CSS4 Selectors - Draft
And when CSS4 will be ready, if it will be like documented now, the proper Selector to do this will be:
E! > F
an E element parent of an F element
Determining the subject of a selector + Child combinator
Then you will be able to craft a combinator like
.test-class div! > *
read as: every DIV that have something inside (some children) and is descendant of test-class
You can select the childs of the parent-div ("test-class") by number.
So to select all the first childs:
.text-class:nth-child{/*code*/}
To be sure that all the child divs are being selected (I would do as much as the .text-class div with the most childs):
.text-class:nth-child, .text-class:nth-child(2),
.text-class:nth-child(3), .text-class:nth-child(4){/*code*/}
Btw it was in the list, hope its going to work for you!
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Say you have:
----------
X
----------
Y -> Z
----------
Given Z is children of Y, i want to select all X which have a sibling that has a child Z
You cannot select a parent element in CSS based upon the child and sibling elements...so there's no way you can get this done...
So there's no CSS parent selector yet..
CSS 2 Selector's Specification Reference
CSS 3 Selector's Specification Reference
In CSS4 Specification I remember there was something like $ kind of thing but it was rejected later
There is currently no way to select the parent of an element in CSS That is why it is impossible to select sibling that has a child Z.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
what's the difference between padding and margin?
Well, what's the difference? I haven't really understand it...
At it's simplest, padding = inside spacing, margin = outside spacing.
Try it.
<div style="border:1px solid red;padding:8px;margin:8px;width:200px;">TEST</div>
The width of this element will be 2 (border) + 16 (margin) + 16 (padding) + 200 (declared width) for a total 234px.