I am alittle confuse about CSS Selectors, I understand that we can group multiple css selectors with a comma if they share similar attributes, but what about multiple css selectors without commas e.g like this:
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
When you use the comma, like
#menu, .item
you are saying:
all elements whose id is menu AND all elements whose class is item
When you nest selectors without the comma, like
#menu .item
you are saying
all elements that has class item inside a container whose id is menu
This selects descendants.
.ui-datepicker-rtl .ui-datepicker-prev will pick all decendants of elements with class ui-datepicker-rtl who have class ui-datepicker-prev
Related
.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;
}
Just like :before and :after CSS pseudo classes, do we have any :below and :above pseudo classes to emulate the respective effects?
Nope, here's a list of all pseudo-classes. :before and :after pseudo classes create pseudo elements as children of your targeted element. Parent/Child is the only concept of physical position in the DOM, visual position is a matter of styling.
This means that, if you want these elements to be visually above/bellow their parent, you must position them as such yourself using CSS.
.a {
margin-top: 20px;
}
.a::before,
.a::after {
display: block; /* they are inline by default */
}
.a::before {
content: "above";
color: blue;
top: -1em; /* go above */
}
.a::after {
content: "bellow";
color: red;
top: 1em; /* go bellow */
}
<div class="a">target</div>
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
I have an issue with applying :last-of-type and :before.
I have the following:
.stepwizard-row:before {
position: absolute;
top: 0px;
content: " ";
width: 1px;
height: 100%;
background-color: #97D3FD;
}
.stepwizard-row:before:last-of-type {
position: absolute;
top: 0px;
content: " ";
}
However, the :before:last-of-type doesn't seem to have any effect.
What am I doing wrong?
You have a wrong order, it should be:
.stepwizard-row:last-of-type:before {}
CSS3 Selectors - 7. Pseudo-elements
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. Note: A future version of this specification may allow multiple pseudo-elements per selector.
By the way, you may get unexpected behavior by using .class:last-of-type, it really should work with elements, e.g. .parent > div:last-of-type.
6.6.5.9. :last-of-type pseudo-class
Same as :nth-last-of-type(1). The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.
I have a div called mycontent. In this div there is a h2 element. This element inherits global properties, but I would like to change its color only within the mycontent div. I would prefer not to add new class because I would like to operate only within the css.
I have something like that:
#mycontent {
position: absolute;
bottom: 15px;
left: 10px;
}
#mycontent h2 {
color: #fff;
}
Your point being? I mean, you already have the right CSS to achieve what you're asking. The #mycontent h2 {} selector you wrote is right :)