I need to style element by page-id. I use for it this:
.page-id-34 .gallery-columns-9 .gallery-item { }
It is possible to style the same, but in relation to all child of page id 34?
Use a wildcard to match all descendants of an element:
.page-id-34 * {
color: red;
}
If you want to style only direct div elements for example it would be
.page-id-34 > div {
color: red;
}
I just got to that. I use:
.parent-pageid-34 .gallery-columns-9 .gallery-item { }
and it works!
Thank you for your participation.
Related
I am trying to refactor some css looking like this:
path.myClass {
//some CSS
}
.someOtherClass.myClass {
//some other CSS
}
I am struggling to find the right syntax for the first part. I am trying to have something looking like this:
.myClass {
path.& {
// some CSS
}
.someOtherClass {
// some other CSS
}
}
How can I refactor this correctly?
You can do it like below. Since the top level selector already has . there is no need to add it again before the parent selector (&) in the inner selector. The second one is fairly straightforward as you can append the parent selector either at the start or at the end. The order of classes doesn't matter.
(Note: There should be no space before the parent selector as it would change the meaning.)
.myClass {
path&{
color: red;
}
.someOtherClass& { /* can do &.someOtherClass also, order doesn't matter */
color: blue;
}
}
Below is the compiled CSS output:
path.myClass {
color: red;
}
.someOtherClass.myClass {
color: blue;
}
what is the way to child element not inherit parents property?
I know way to child element declare individually property.
I curious that people use another way.
You can either set some styles only for that element:
p{ color:red; }
or overwrite the default inherited styles (like margin in this case):
p{ margin: 0; }
or, in some contexts add a class or an id to add more weight to the selector (adding an id to the p):
div p{ color: blue; }
#myParagraph{ color: red; }
This could be a way
div{
padding:10px;
}
div *{
padding: 0px;
}
But its highly NOT RECOMMENDED for elements with many children
This seems like the silliest question, but it has got me stuck. I'm semantically struggling to combine a pseudo selector and tagname with sass
This is what I'm trying to do:
.parent {
&:first-child.. if h4 {
// styles
}
}
I don't want to target all first childs, just those that happen to be a h4.
If it had a class it would just be &:first-child.class
You need to insert the tag name before the classname:
h4&:first-child
Have you try?
.parent{
h4:first-child{
}
}
You could just write
.parent {
h4 {
&:first-child {
// styles
}
}
}
Hope that helps
Two ways you can do this in Sass:
.parent {
h4 {
// h4 styles...
&:first-child {
}
}
}
Or, if you don't need any styles on the <h4> itself, simply:
.parent {
h4:first-child {
}
}
Assuming you are new to Sass, have a look at this article regarding parent selectors.
I have lots of vertical lines that are before <a> links, but I want to hide the third line.
Here is my CSS for my <a> before:
.header-social a:before {
//line style
}
I have tried using nth-child(), but i don't know how to use pseudo elements with nth-child().
.header-social a:before:nth-child(4) {
display:none;
}
Not sure how I could go into any more detail than I already have. Do I need JavaScript?
Do like this:
.header-social a:nth-child(3)::before {
color: red;
}
or using nth-of-type
.header-social a:nth-of-type(3)::before {
color: red;
}
I have the following markup:
<div class="ctr-1">
<h3>Title</h3>
<div class="ctr-2">
<h3>Title</h3>
</div>
</div>
And the following CSS
.ctr-1 h3:first-child{ display:none; }
Both <h3> tags are hidden, I only want the first one hidden. How?
This is what the first-of-type and nth-of-type selectors are for.
For example:
.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }
This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.
Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.
You have a few different options:
Use the :first-of-type pseudo class to select the first element of type:
.ctr-1 > h3:first-of-type {
display: none;
}
Or use the :nth-of-type(n) pseudo class and specify the index of the first element:
.ctr-1 > h3:nth-of-type(0) {
display: none;
}
If type doesn't matter, and you always want to select the first child, use the :first-child pseudo class:
.ctr-1 > h3:first-child {
display: none;
}
They are both technically the first-child.
In your example, you could do:
.ctr-1 > h3:first-child { display:none; }
You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:
.ctr-1 > h3:first-child{ display:none; }
You can use:
.ctr-1 > h3 { display: none; }