I could've sworn I saw an advanced CSS rule that uses an asterisk in the selector name. I'm using Bootstrap and I have a couple different divs within a parent div like so:
<div class="example">
<div class="col-sm-1">
TEST
</div>
<div class="col-sm-4">
TEST
</div>
</div>
I wanted to use something like:
div.example div.col-sm-*{
padding-right:5px;
}
I know it wouldn't kill me to add each rule side by side but I thought I had seen some thing like that done in the past and would like to learn the short hand for the future if it exists. I also tried something like:
div.example div.col-sm-[*]{
padding-right:5px;
}
Is this possible?
You might be thinking of an attribute selector:
div.example div[class*="col-sm-"]{
padding-right:5px;
}
Assuming the only class that each of those divs will have is a column class, that will work. Alternatively use ^= in lieu of *= to indicate that the class attribute value starts with that string.
You could also use:
.example div{
//rule
}
Related
I have a web code generated by an aplication (built in angular). It is a menu choice where I need to hide some of them. It looks e.g. like this:
<div class=first>
<div class=second>
<a href=href1>
</div>
<div class=second>
<a href=href2>
</div>
<div class=second>
<a href=href3>
</div>
</div>
Now what I need is to hide the div which contains a element with href2.
I can hide the a element:
.first .second a[href="href2"] {display:none}
But I need to hide the whole div element. I thought:
.first .second < a[href="href2"] {display:none}
that doesn't work.
I KNOW THE JQUERY SOLUTION with has function. The problem is I can only adapt css files of the application. If i'm right I cannot use jquery in css file.
Please...any Idea how to do this ?
thanks a lot for help
best regards
Marek
At the moment there is (sadly) no way to adress the parent element with CSS.
I don't know your layout or CSS Code but maybe you can just structure your HTML-Code in a different way.
Edit
And now I understand your question...
To hide (for example) the 3th .second div you don't need to adress it from the child element but from the parent element.
What you are probably looking for are the nth selectors,
for instance: nth-child() or nth-of-type().
You can find more info here.
Also, you should probably take a look at the basics of HTML and CSS.
In your code you have not closed the <a> tags or wrapped the values of the attributes in quotation marks.
Wrong:
<div class=first></div>
Right:
<div class="first"></div>
To hide (for instance) the first element you could use the :first-child selector or the :nth-child() selector. Since you will probably use the nth-child() selector this would be:
.first > .second:nth-child(1) {
display: none;
}
Is there a way to to combine the css of two adjacent siblings? I have some code generated by some wordpress theme where I'd like to use css to modify.
For the code below, I would like to hide the p "hide-me" when the class "myclass" also was given a class name "john"
would like to have something like this:
(.first-sibling .myclass.john) ~ (.second-sibling .hide-me) {display:none;}
<div class="parent">
<div class="first-sibling">
<p class="myclass john">Paragrah to determine the hiding of hide-me</p>
</div>
<div class="second-sibling">
<p class="hide-me">Hide this if myclass has a class named "john" </p>
</div>
Thank you
To achieve what you are asking for with your current HTML you need to use Javascript. Your other option is if you can apply class john to the parrent then you can have CSS such as this and it would work:
.first-sibling.john + .second-sibling{
display: none;
}
Here is a JS Fiddle
https://jsfiddle.net/exk0ex8c/1/
You can also further manipulate HTML so that the two p elements are under same div and then further use CSS Selectors to accomplish this. For list of all CSS selectors you can view here: http://www.w3schools.com/cssref/css_selectors.asp
Here is an HTML fragment:
<div class="wrapper">
<div class="ebook">
<div class="page"></div>
</div>
<div class="book">
<div class="page"></div>
</div>
<div class="document">
<div class="page"></div>
</div>
</div>
I want to match all divs with the page class with parents divs having ebook or book classes only. This selector can be used:
div.ebook div.page, div.book div.page
However is there a CSS engine suporting the following syntax ?
(div.ebook, div.book) div.page
or better
div.?book div.page
I'm not interested with a solution like this: div:not(.document) > div.page.
The proposed syntax takes the form of a functional pseudo-class called :matches():
/* As this is a pseudo-class, you can make it a little DRYer by saying
div:matches(.ebook, .book) div.page instead */
:matches(div.ebook, div.book) div.page
If you really want to get technical, Firefox implements it as :-moz-any():
:-moz-any(div.ebook, div.book) div.page
and Chrome implements it as :-webkit-any():
:-webkit-any(div.ebook, div.book) div.page
(and these actually came first prior to the selector being specced as :matches())
But if you're using them in CSS you will have to duplicate your rulesets because of certain CSS parsing rules, which is as good as not using them at all (in fact, worse). These selectors are meant for internal use only, not for production.
What you currently have is the only viable option for now.
If you want to cheat a little, you could use a substring attribute selector, but that assumes each of those elements will have exactly one class only, and no other class names will match by this particular substring (this is similar to the div.?book example you have, but it comes with the limitations of an attribute selector that are not present in a class selector):
div[class$="book"] div.page
Personally, I'd just stick with the verbose option because it's more robust.
Check out this Fiddle that should do what you're looking for:
http://jsfiddle.net/Delorian/L44u0p8r/
div[class$="book"] {
background-color: yellow;
}
Further details: https://stackoverflow.com/a/9836182/3264286
There is no such thing as an OR selector in CSS, except for as in the example you gave, where a comma (,) can be used to separate multiple selectors e.g;
div.ebook div.page,
div.book div.page{
// CSS properties
}
This question already has answers here:
How can I select the last element with a specific class, not last child inside of parent?
(8 answers)
Closed 8 years ago.
I'm trying to target the div with class "text" inside the last div with class "done".
For example:
<div class="installSteps">
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Prep</div>
</div>
<div class="insProgress done">
<div class="icon">Img</div>
<div class="text">Check</div> < trying to target this
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Configure</div>
</div>
<div class="insProgress upcoming">
<div class="icon">Img</div>
<div class="text">Go!</div>
</div>
</div>
I tried all kinds of combinations of last-child and last-of-type to no avail. I really thought this would work:
.installSteps .done:last-child .text
Any way to do it?
EDIT: Adding some additional details...
The "done" class replaces the "upcoming" class as the processes complete. So it starts with all "upcoming" and then the first one gets "done" then the second one also has "done", then the third, then the fourth... (so I can't target a specific nth child)
So Im looking for a way of targeting the last instance of "done" wherever that may be...
Sorry for not specifying this earlier. i wish I could add an additional class but for now I am unable to...
Provided the hierarchy doesn't change, this works for me:
.installSteps div:nth-child(2) :last-child {
color:red;
}
jsFiddle example
If the hierarchy will change, then you're probably going to have to use JavaScript as you can't target classes of elements with CSS pseudo-classes, only elements.
You could do this
.installSteps .done:not(:first-child) .text {
color: red;
}
Will affect anything after first one.
JS Fiddle Demo
Try nth-child() applied to the .done class.
Example
.done:nth-child(2) .text{
background:red;
}
DEMO
http://jsfiddle.net/a_incarnati/ntzj5wte/
I am trying to define styling for second sibling's child element based of first sibling's class.
Here is an example of what I am trying to achieve
<div >
<div class="one">
<div class="find edit">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
In this example, I want "Change me" to be green if "edit" class is found. Is it possible to achieve this purely based on css?
Help much appreciated.
Thanks,
Medha
As far as I know, it's not possible to access the parent selector (I wish it was). If you could consider this structure, it'll be no problem at all:
HTML
<div>
<div class="one edit">
<div class="find">
Find me
</div>
</div>
<div class="two">
<div class="change">
Change me
</div>
</div>
</div>
CSS
.one.edit + .two .change { color: green; }
If not, you could easily accomplish what you're after with a little JavaScript.
Here You can find answer:
Complex CSS selector for parent of active child
Short answer copied from link:
Selectors are unable to ascend
CSS offers no way to select a parent or ancestor of element that
satisfies certain criteria. A more advanced selector scheme (such as
XPath) would enable more sophisticated stylesheets. However, the major
reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering
issues.
Update:
Now I notice the edit class required in the child. You cannot.
simply you need something like a parent selector, and this doesn't exist in CSS 3, it's suggested in CSS 4 though, but that's far from happening any time soon.
More here:
CSS selector for "foo that contains bar"?
.
Original:
Depending on which browsers you care about, this may work:
div.one + div.two > div.change {
color: green;
}
Reference:
http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors
Live Example:
http://jsfiddle.net/Meligy/NVjq6/