I think this is very unlikely but is there any way in CSS to achieve moving elements in the DOM? Like moving jt-menu-item-price into the jt-header in the following?
<div class='jt-row'>
<div class='jt-header'>this is what I need done</div><div class='jt-menu-item-price'>37.23</div>
</div>
<div class='jt-row'>
<div class='jt-header'>this is what I need done<div class='jt-menu-item-price'>37.23</div></div>
</div>
Not using CSS, no. You can manipulate the DOM using JavaScript, but not with CSS. You could 'visually' move it with CSS, but that wouldn't affect the DOM structure, just how it is presented.
You have to use Javascript to manipulate the DOM. CSS never affects the DOM, just let you style it.
Related
https://interactjs.io/docs/action-options/#ignorefrom shows how to use ignoreFrom to disable dragging from certain elements. My movable element look something like:
<article>
<div>
<h1>My Article</h1>
<p>Hello World</p>
</div>
</article>
It could contain any HTML tags within the <div>, not just <h1> and <p>
I want to ignore dragging from any child element except the <div>. I've tried using ignoreFrom: ':not(div)', but that does not work (I'm guessing that the :not pseudo-selector is not supported). The only option I can get to work is to provide a list of all possible HTML tags as the value for the ignoreFrom. So, for this specific example, setting ignoreFrom: 'h1,p' works, but this approach will become unmanageable in the general case. Is there an easier way?
Tell me how to add href to a link via CSS. How to do it in the standard way is clear.
<div>
Button
</div>
But I need pure HTML. And in CSS, specify which address to make the transition to.
<div>
<a class="button-click"></a>
</div>
.button-click a {href:"https://example.com"}
How do I specify a path in CSS?
CSS cannot be used to perform action or make changes to DOM. Its used for presentation purpose.
You can use script to do the manipulation not css.
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;
}
I have a <div> classed as class="tooltip" which is normally hidden with display:none.
I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.
Here is the simplified version of my code :
<img id="slot" class="single" src="slot.png" usemap="#slot"/>
<map name="slot">
<area
shape="poly"
coords="30,0,61,15,31,31,0,16"
alt="Slot"
href="#trigger-happy">
</map>
<div class="fixed-container">
<div class="tooltip">
Slot
</div>
</div>
As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.
Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.
It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.
You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.
Here is a working example.
Updated HTML:
<div class="fixed-container">
<div id="trigger-happy" class="tooltip">
...
</div>
</div>
Use the :target pseudo class to style the targeted element, #trigger-happy.
The base CSS would look like this:
#trigger-happy {
display:none;
}
#trigger-happy:target {
display:block;
}
The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.
With the below HTML, how i can select the DIV depper (which has no children)?
I think that i can use nth-last-child but dont work because all divs has the last (and also the first)! :D
PD: Not is possible the use of the ID or CLASS property in the DIV deeper (because they are HTML existent files in web)
Html:
<div class="base">
<div>
<div>
<div>
<div>
<!-- recursive divs (quantity not defined...) -->
</div>
</div>
</div>
</div>
</div>
CSS selectors cannot look to the parent elements, sadly, so you can't see which elements don't have divs as children.
If you are using jQuery, you can do this to find the element:
$('.base :not(:has(*))').addClass('deepest');
Demo: http://jsfiddle.net/EhZax/
You'll have to use Javascript. Here's an example using jQuery:
$('.base *').filter(function(){
return ! $(this).find('> *').length;
});
See it here in action: http://jsfiddle.net/E6sec/
Update: If you want to, you could create your own :sterile selector. Here's an example:
jQuery.expr[':'].sterile = function(el) {
return ! el.children.length;
};
You could then just use it as you would any other pseudo selector:
$('.base :sterile');
Here's the fiddle: http://jsfiddle.net/FBw5q/
P.S. I used the native el.children since it's way faster than any of jQuery's methods. However, IE < 9 will include comments as children. If that concerns you, you can use jQuery's children() method.
You need Javascript for that. It's not possible with CSS only