This code doesn't apply the width of my div
.column-hide {
width: 16.666666666666664%!important;
}
.column-hide * {
display: none;
}
While this works
.column-hide * {
display: none;
}
.column-hide {
width: 16.666666666666664%!important;
}
Any advice?
UPDATE: HTML CODE
<div class="col-md-6 column-hide">
<div class="header-label bg-gray custom-attr-header">
</div>
<div class="fields-body">
<h4 class="pull-left">Texts</h4>
</div>
</div>
An Asterisk (*) is the universal selector for CSS. It matches a single element of any type. So I;ll not suggest to avoid this universal selector. I felt many time if you define same property the last one applied always.
Here is the Working Example.
here is the HTML code and CSS. The last one property will apply to element.
p{color:red;}
p{color:green;} /*will take me as I am defined at last*/
<p>I'll be RED</p>
<p>I'll be GREEN</p>
As you can see the color:green applied at last so <p> element color will be green. same theory will apply in your case as well.
* {
display:none
}
will shows no element of html as * means all element.By using current posted code nothing is showing up. In order to display the content need to remove the above property
Related
Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not?
The Code (http://jsfiddle.net/YWY4L/):
p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
No, it's not possible using just one selector. The :first-of-type pseudo-class selects the first element of its type (div, p, etc). Using a class selector (or a type selector) with that pseudo-class means to select an element if it has the given class (or is of the given type) and is the first of its type among its siblings.
Unfortunately, CSS doesn't provide a :first-of-class selector that only chooses the first occurrence of a class. As a workaround, you can use something like this:
.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }
Explanations and illustrations for the workaround are given here and here.
The draft CSS Selectors Level 4 proposes to add an of <other-selector> grammar within the :nth-child selector. This would allow you to pick out the nth child matching a given other selector:
:nth-child(1 of p.myclass)
Previous drafts used a new pseudo-class, :nth-match(), so you may see that syntax in some discussions of the feature:
:nth-match(1 of p.myclass)
This has now been implemented in WebKit, and is thus available in Safari, but that appears to be the only browser that supports it. There are tickets filed for implementing it Blink (Chrome), Gecko (Firefox), and a request to implement it in Edge, but no apparent progress on any of these.
This it not possible to use the CSS3 selector :first-of-type to select the first element with a given class name.
However, if the targeted element has a previous element sibling, you can combine the negation CSS pseudo-class and the adjacent sibling selectors to match an element that doesn't immediately have a previous element with the same class name :
:not(.myclass1) + .myclass1
Full working code example:
p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
I found a solution for your reference. from some group divs select from group of two same class divs the first one
p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}
BTW, I don't know why :last-of-type works, but :first-of-type does not work.
My experiments on jsfiddle... https://jsfiddle.net/aspanoz/m1sg4496/
This is an old thread, but I'm responding because it still appears high in the list of search results. Now that the future has arrived, you can use the :nth-child pseudo-selector.
p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }
The :nth-child pseudo-selector is powerful - the parentheses accept formulas as well as numbers.
More here: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
You can do this by selecting every element of the class that is the sibling of the same class and inverting it, which will select pretty much every element on the page, so then you have to select by the class again.
eg:
<style>
:not(.bar ~ .bar).bar {
color: red;
}
<div>
<div class="foo"></div>
<div class="bar"></div> <!-- Only this will be selected -->
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
As a fallback solution, you could wrap your classes in a parent element like this:
<div>
<div>This text should appear as normal</div>
<p>This text should be blue.</p>
<div>
<!-- first-child / first-of-type starts from here -->
<p class="myclass1">This text should appear red.</p>
<p class="myclass2">This text should appear green.</p>
</div>
</div>
Not sure how to explain this but I ran into something similar today.
Not being able to set .user:first-of-type{} while .user:last-of-type{} worked fine.
This was fixed after I wrapped them inside a div without any class or styling:
https://codepen.io/adrianTNT/pen/WgEpbE
<style>
.user{
display:block;
background-color:#FFCC00;
}
.user:first-of-type{
background-color:#FF0000;
}
</style>
<p>Not working while this P additional tag exists</p>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
<p>Working while inside a div:</p>
<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
I found something that works
If you have a bigger class which contains something like grid, all of elements of your another class
You can do like that
div.col-md-4:nth-child(1).myclass{
border: 1px solid #000;
}
Simply :first works for me, why isn't this mentioned yet?
Say I have the following HTML structure:
<div id="outer">
<div id="target">
</div>
</div>
The outer div may or may not have the id "outer".
I want to apply styles to #target only when its not contained within a div having the id "outer":
<div id="something-else">
<div id="target">
</div>
</div>
With LESS, I tried the following:
:not(#outer) {
#target {
// styles
}
}
This doesn't work apparently (I guess because the :not operator is not excluding its nested elements).
Is there any way to achieve this with CSS / LESS? Of course I know that I can refactor the html / logic so that I apply the styles without using :not, but I'm wondering if theres a way to achieve what I'm asking as is.
Try this
:not(#outer) > #target {
// Styles
background-color: red;
}
}
Here's a little fiddle you can try.
I always wondered how can you select an element that is deeply buried in other elements that have classes and id's ?
For example :
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
If I want to select element then what I would do is write in CSS the following :
.container #footer .sixteen .columns span {
font-weight: bold;
}
Unfortunately it seems that this method is not valid or recognized by browsers.
Let's say that I don't want to give any general styles to 'sixteen columns' class or span itself. I just want to apply very specific styles to this very specific element.
How should I select that span element ?
Given your code:
<div class="container" id="footer">
<div class="sixteen columns"><span>some text here</span>
</div><!-- I've chosen to close the opened div element -->
Your selector cannot work, but it is definitely "recognized by browsers." The problem is that it is not, as you say, 'valid' (for the HTML structure that you have).
The problem is that, in CSS, white-space implies an ancestor-descendant relationship, so:
E F
Selects an element, matching selector F, that is a descendant of selector E; your own selector:
.container #footer .sixteen .columns span
selects a <span> element, within an element of class 'columns', within an element of class 'sixteen', within an element of id="footer" itself within an element of class 'container'; giving HTML:
<element class="container">
<element id="footer">
<element class="sixteen">
<element class="columns">
<span></span>
</element>
</element>
</element>
Which bears no resemblance to your own HTML. As white-space establishes an ancestor-descendant relationship, the corollary is that no white-space implies the same element, which is what you were aiming for, I think. Omitting the white-space, then, gives the following selector:
#footer.container .sixteen.columns span {
/* CSS here */
}
This selector is, probably, overly complex (given that an id uniquely identifies an element1), and could be re-written as simply:
#footer .sixteen.columns span {
/* CSS here */
}
Or even, if you're willing, and able, to sacrifice some specificity:
#footer span {
/* CSS here */
}
Note that a class-name is often used in JavaScript to denote a state, state-change or interaction of some kind; so it's not definitively redundant to combine an id with a class (#footer.container), but if the class is not dynamically added or removed, it probably is redundant and unnecessary. As with all things in web-development, it's worth experimenting to find out what works for you; contemporary browsers are fast enough for the most part, that adding a class-name to the selector isn't going to slow things down substantially, but beware of time-critical use-cases, when it's best to remove everything that's not absolutely necessary.
References:
CSS Selectors (and combinators).
with:
#footer > .sixteen.columns > span
Your selector does not work because you have spaces between selectors which refer to the same element.
e.g. .container #footer
But the space reads: "find an element with the id footer that is a descendant of an element with a class that is container". But you mean: "find an element that has the class container AND the id footer" which you can do by concatenating them without a space:
e.g. .container#footer
See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Rearrange your selector like this
#footer.container .sixteen.columns span {
font-weight: bold;
}
<div class="container" id="footer">
<div class="sixteen columns">
<span>some text here</span>
</div>
</div>
#footer span { font-weight: bold; }
My question:
Is it possibile to ONLY change one element of a class without (a) giving it an own ID and (b) without doing inline-style in the HTML document?
Why do I want to do that?
I am using a software where the program creates classes and ids by itself (for a questionnaire). I cannot change or add classes/ids nor can I change the html. The only thing I can do is grab those already defined classes with CSS and style them (which is what I want to do).
Example:
JSFiddle: http://jsfiddle.net/nyGWc/
In this example I only want to change the background-color of the second ".class2" to green (whereas the first ".class2" div should remain red).
<div class="class0">
<div class="class1">
<div class="class2">
This div has a red background color.
</div>
</div>
</div>
<div class="class0">
<div class="class1">
<div class="class2">
This div should be green without adding an ID to it.
</div>
</div>
</div>
CSS:
.class1 {
height: 3em;
}
.class2 {
background-color: red;
}
What I've tried so far:
I've tried to use :nth-child(2) and :nth-of-type(2) but as far as I've understood it, it only selects the target child under a parent element? In my example the div elements with the class ".class2" are not siblings. So those won't work.
Thanks a lot!
As you rightly said, since the class2 elements are not siblings, you cannot use nth-child. So the solution to your problem is using nth-child for class0. Here is the code
.class0:nth-child(2) .class2{
background-color: green;
}
FIDDLE
Select the second class0, then select its child class2. Using nth-of-type allows the .class0 elements to not need to be under the same parent element.
.class0:nth-of-type(2) .class2 {
background-color: green;
}
Fiddle
<div class="rightsidebox">
<div class="item-info-list">
<p>Model: AIDCU</p>
<div class="product-details">
<p></p>
<div class="price-box"> <span class="regular-price" id="product-price-1617-related">
<span class="price">$8.99</span></span>
</div>
<p></p>
</div>
</div>
I want to make a style for price and make the color green just in a case it is in the rightbox div and I want to use css , I cannot change the structure because it is a theme and it should not have conflict with other prices in other themes
I can use div.rightsidebox>div.item-info-list
but I cannot go further because of the paragraph in there
how can I solve it? I have weakness in using ">" and multiple classes in each other
This I believe is what you are looking for:
div.rightsidebox>div.item-info-list>div.product-details {
background:#ff0000;
}
JSFiddle: http://jsfiddle.net/RF5e7/
If you merely just want to select the price and make it green if it is contained by rightbox:
.rightsidebox .price {
color: green !important;
}
.rightsidebox .price { color: green !important; } // important to override other styles
EDIT: Usage of > - selectorr
The element>element selector is used to select elements with a specific parent. Note: Elements that are not directly a child of the specified parent, are not selected. More info
div.rightsidebox>div.item-info-list .price{
color: green;
}
JSFiddle example.
.rightsidebox .item-info-list p {
/* code */
}
This would go down to the paragraph element inside the classes defined there inside the stylesheet (above off course).
You don't need to be using div.rightsidebox that is required only if you're having class names for multiple elements. Otherwise only .rightsidebox is OK.
You can learn more about the CSS child selectors here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors