.upload header {...}
Styling will be applied to any header that is a child of any element with class of '.upload'.
Is it possible to do this?
.upload header, form {...}
Or will I have to specify the class for every type selector ?
You can't do that. The comma for selector works like the following:
div > nav,
p {
display: block;
}
Is exactly the same as writting
div > nav { display: block; }
p { display: block; }
The comma is used to re-use rules, but each selector is global, and does not use the same parent.
In your case, if you want to make the rule only apply to those form elements that are children of .upload, you would have to do
.upload header, .upload form {...}
You could do this with two selectors. First set your styles with * and then reset the same styles if you only want it to be applied to the first child element.
.upload *:first-child {
background: blue;
}
.upload *:first-child *:first-child {
background: none;
}
Related
What I want to do is remove the margin for the p nested inside the id then class.
Please note I cannot add a direct id or class for this p since this is a Wordpress site.
Something like this I believe is what you're looking for
.textwidget p
{
margin: 0;
}
or if you specifically need that first paragraph tag
.textwidget p:first-child
{
margin: 0;
}
You need to use the #id, .class, p and possibly :first-child selectors, like this:
#panel-w59fa3473baf71-0-1-0 .textwidget p:first-child {
/* your styles */
}
Keep in mind that id might change since this is a Wordpress site. If that's the case you'll need to use one of the classes on that same element. Like:
.so-panel .textwidget p:first-child {
/* your styles */
}
Actually it was my mistake, i have prefixed the p with a (.)
/*Style header whatsapp area*/
#panel-w59fa3473baf71-0-0-0 .textwidget p{
margin:0px;
}
#panel-w59fa3473baf71-0-1-0 .textwidget p{
margin:0px;
}
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
Is it possible to check the class of an element, see if it exists, and then apply the style for another class?
Example pseudo code:
if (.myClass .myBlock == true) {
.otherClass {
display:none
}
}
It's not possible in this context. But you can achieve a similar result with the cascading nature of CSS.
Apply a class to the body of your website:
.another-class {
display: none; // hides .another-class by default
}
body.special-class {
.another-class {
display: block; // shows if the body contains .special-class
}
}
Since the specificity of the generated output is higher at the second rule, the elements with .another-class will be visible.
Give the following row a class
Utilising the + selector enables us to display the row after the mentioned class. This way we can style dropdowns popups, given we have the following HTML:
.popup {
display: none;
}
.popup:hover {
display: block;
}
.container:hover + .popup {
display: block;
}
<div class="container">Hover me!</div>
<div class="popup">This is a popup!</div>
I'm afraid that's all that is possible with CSS.
My website here I'm creating for a friend is giving me issues with the input[type="button"]. I only a specific style to be applied to the button in the sidebar ONLY. However no matter what I do it effects all buttons.
#sidebar.widget-wrap input[type="button"], input[type="submit"] {
clear: both;
display: block;
margin-top: 2em;
width: 100%;
}
How do I make it only effect the go button in the sidebar?
You must duplicate #sidebar.widget-wrap:
#sidebar.widget-wrap input[type="button"],
#sidebar.widget-wrap input[type="submit"] {
}
Otherwise your selector would result in every input[type="button"] that is inside #sidebar.widget-wrap and every input[type="submit"].
The comma has no special meaning, it only combines two (or more) selectors. The result will always be the same if you use two separate selectors instead of the combined one:
div a, div span { color: yellow }
/* is the same as */
div a { color: yellow }
div span { color: yellow }
Say you had a Css style defined below .
div
{
background: url(themes/default/images/backgrounds/lh-navigation.png) repeat-x;
}
.child
{
backgroud-color:#FFFFFF;
}
<Div id="tempDiv" class="child"></Div>
I don't want the backgroud style applied to element tempDiv. How can i remove the parent style for the a specified div element. Is there any way to make it ?thanks
In CSS children inherit properties from parents. You'll have to override the style of the parent in your child style declarations. In this case, since it is a background you are trying to override your .child style declaration will look like this:
.child {
background-image: none;
background-color: #FFFFFF;
}
As the others above have pointed out you could also expand on the selector and write a new rule for the id attribute on the element:
#tempDiv {
background: none;
}
try:
.child#tempDiv{
background: none;
}
note the absense of whitespace between the id and class since it is on the same element.