I have a coding restriction that I cannot change and trying to find a way around it, to position a div based on a non parent.
I have the following code structure, which cannot be changed:
<div class="row">
<div class="sub-row01"></div>
<div class="sub-row02"></div>
</div>
<div class="row">
<div id="sub-row03"></div>
</div>
What I am trying to do is position #sub-row03 in relation to .sub-row02. Anything that I have tried, will only allow me to position #sub-row03 in relation to first .row
Is what I am trying to achieve even possible? If so, what would be the proper way to style it?
To answer your question it is not possible with pure css since it only allows styling using the parent or a preceding child.
For example
a + b { } will style b
a ~ b { } will style b
a > be {} will style b
but there is no way to style a in these cases.
You can however do this via javascript. If you want to go this route you could do something like:
document.getElementById("sub-row03").style.left = document.getElementById("sub-row02").offset().left;
I can write something a bit more concrete if necessary as I have not tested it but it should help with the basic concept.
Related
I'm using react, so I have 4 simple blocks, left to right.
<div className="box wrapper">
<img alt="customAlt" src={image} />
<p>{text} </p>
</div>
The second block and the forth block, I want the position to change so that p tag come first before the image.
What is the best way to do this? I tried to use flexbox with nth child, but doesn't work:
.box wrapper:nth-child p(even){
order: 1
}
.box wrapper:nth-child img(even){
order: 2
}
I'm wondering if it's supposed to be done in css or there's proper way to do this in react? because I store all my data in other file, so I prefer not to duplicate the content.
Please advice, thanks.
Your CSS doesn't look quite right. You have two classes, 'box' and 'wrapper', so replace the space in between them with a dot. It may be useful to take a look at this reference for CSS selectors.
The '(even)' needs to come after nth-child. Try this instead:
.box.wrapper:nth-child(even) p {
order: 1
}
.box.wrapper:nth-child(even) img {
order: 2
}
To add clarification, .box.wrapper:nth-child(even) p is like saying, select each paragraph tag, within each evenly-indexed child of each element whose parent has the class, 'example'.
P.s. I didn't know about the order property for flexbox, despite using it all the time, so thanks!
I have a loop displaying some markup that has dynamic class names. Is it possible to hide all elements with duplicate class name besides the first instance? For example below I would only want the first .SomethingDynamic1 and the first .SomethingDynamic2 to be visible.
I think I might be able to use the div[class^="group"] "starts with" attribute selector to achieve this but am I able to match dynamic text after that and filter out the duplicates? I would prefer a CSS only solution if possible.
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic1">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
<div class="group-SomethingDynamic2">
Update (credit #Temani Afif)
If you want a CSS only solution, you will need to know the classes to filter beforehand.
Given that, you can simply use a siblings selector like the following:
.group-SomethingDynamic1 ~ .group-SomethingDynamic1 {
display: none;
}
Here is a stackblitz example
I would like to re-order some div using only CSS if possible.
Here is the HTML sample I want to re-order:
<div class="block1">
Block1
</div>
<div class="block2">
<div class="subblock1">S-Block1</div>
<div class="subblock2">S-Block2</div>
<div class="subblock3">S-Block3</div>
</div>
And this is the graphical result I want:
S-Block1
S-Block2
Block1
S-Block3
I already tried playing with display: flex; and order: X but with no success. The main problem lays in the fact that I want to split the block2 before and after the block1. The flex display only allow me to change order of block of the same "level".
I would really like to have a solution that doesn't not use JavaScript to re-write the DOM (by taking subblock3 and putting it elsewhere to please my CSS) if possible.
It appears this is not possible and javascript is not an option for my problem.
Here is the sample code I used (jQuery needed).
$(".subblock2").prependTo(".form-wrapper");
$(".subblock1").prependTo(".form-wrapper");
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/
I've got a DIV I want to hide, but I cannot give it a specific ID... actually I cannot change the text of the DIV, since it is retrieved from a database, but I can add some html before it AND I know the exact text content of the DIV.
It's something like:
<div class="this_div">content_of_this_div</div>
So, I thought that maybe looking for the specific content, then taking the div and incapsulating it in a hidden div could work... or something similar... any idea?
thanks
If you can insert other HTML around it then you can use another div to hide it
Using CSS and HTML
.hidden { display: none; }
...
<div class="hidden"><div class="this_div">content_of_this_div</div></div>
Using HTML and Inline CSS
<div style="display: none;"><div class="this_div">content_of_this_div</div></div>
Wrap it in your own div would seem most sensible.
<div id="mydiv">
<div class="this_div">content_of_this_div</div>
</div>
then hide your div:
document.getElementById("mydiv").style.display="none";
Or, use jQuery. If that is only instance of class, you could do
$(".this_div").hide();
If you just want to be able to select it without giving it a specific id, you can do a number of things. Make an empty div with an id before, then use the direct sibling selector:
#divid+div {}
or use many other css selectors to accomplish same
But I do reccomend the aforementioned external div technique over this