Is there a way to select elements that are not parents of any dom (of the type written as <...>)? I know that individual characters may count as dom, but ignoring that, I want to select the terminal nodes. In the following, <div id=2> would be such element but <div id=1> would not.
<div id=1>
<div id=2>
Hello World
</div>
</div>
Unfortunately, this isn't possible with a CSS selector. You need to find another way around it depending on what you're trying to achieve.
For the record, the :empty pseudo-class won't work here because it only matches an element that doesn't have any text or element children, not even whitespace. Since your second-level div contains text, it is not :empty.
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?
I would like to select a child if it is a specific number of specific (eg. .specialid) parent elements away from a specific (eg. .specialchild) child element.
example (selecting .specialchild under odd nestings of .specialid:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not .specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of .specialid-->
</div>
</div>
</div>
EDIT: If needed, I am open to JavaScript alternatives. (but no JQuery)
EDIT 2: visual: I am making a dark theme chrome extension, and i am using css filters to do it. when applied over each other, they cancel out. the element with the white background and the metal wolf thing, since it has a background image set, has the filter applied over it as well, thus keeping it from looking weird. However, my profile icon is located inside this element, and <img> tags are also filtered again to cancel out the effect. this is where the problem begins. this then leaves it with three filter effects, two of which cancel out, and leaving the image inverted. i am attempting to solve this issue for elements no matter how deeply they are nested. btw im using javascript to detect the background image and add a data- attribute to it.
EDIT i just figured out that i could also just have it so that all children of odd nestings of .specialid can be selected EXCEPT another nested .specialid, without even referencing .specialchild
Ok, first of all, you can't have repeated ID's as ID's are used for unique elements. In order to correct your code you'd have to do something like this:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not #specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of #specialid-->
</div>
</div>
</div>
Honestly, I am not really sure what you're trying to achieve with this code, and the structure is a little strange, but I would probably recommend using definitions like these:
To refer to odd .specialid elements.
.specialid:nth-child(odd) { ... }
To refer to odd .specialchild child element of odd .specialid
.specialid:nth-child(odd) > .specialchild:nth-child(even) { ... }
To refer to odd .specialid elements inside odd .specialid elements
.specialid:nth-child(odd) .specialid:nth-child(even) { ... }
I am not sure what else you're trying to achieve but you should work on your HTML structure first.
I was able to answer my own question:
:not(.specialid) *:not(.specialid) .specialid *:not(.specialid) .specialchild{
/*styles*/
}
I'm trying to get :first-of-type to work for the <strong> HTML element but it won't work.
There can be numerous (random number and placement, but within p tags) <strong> elements but I want the first one to have different text color than the rest.
Here I would expect Hello 1 to be blue and Hello 2 + Hello 3 to be yellow. But they're all blue.
.yolo p strong { color:yellow; }
.yolo p strong:first-of-type { color:blue; }
<div class="yolo">
<p>bla bla</p>
<p><strong>Hello 1</strong></p>
<p>bla bla</p>
<p><strong>Hello 2</strong></p>
<p>bla bla</p>
<p>bla bla</p>
<p><strong>Hello 3</strong></p>
</div>
JS fiddle
Any ideas?
Solution doesn't have to include :first-of-type as long as the HTML remains unchanged.
As mentioned, each <strong> element is the first of its element type in its own parent <p>, therefore both elements match the :first-of-type pseudo-class.
Unfortunately, in this case, you may be stuck. Since the first <strong> element may not necessarily appear in the first <p> element as shown in your markup, you won't be able to use something like .yolo p:first-of-type strong to target the first <strong>. Neither is there a way using CSS to target just the first element in such a structure, since the existing structural pseudo-classes only match the nth element among its siblings, and there is no parent selector so you can't write a selector finding "the first <p> element that contains a <strong> element".
Since your markup is produced by a CMS, you will have to either
tell the CMS to apply a class name either to the first paragraph containing a <strong> element or to the first <strong> element, or
use JavaScript to apply the class name if the behavior of the CMS cannot be modified
then target this class.
From css-tricks:
The :first-of-type selector in CSS allows you to target the first occurence of an element within its container. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
This means that this will work:
<div class="yolo">
<p><strong>Strong 1</strong>
<br>
<strong>Strong 2</strong></p>
</div>
But this wont:
<div class="yolo">
<p><strong>Strong 1</strong></p>
<p><strong>Strong 2</strong></p>
</div>
Because in the second example each of the <strong> is the first in its <p> container. But in the first example, the two <strong> tags are both in the same <p> container, so Strong 1 goes blue, being the first one in the paragraph, and Strong 2 goes yellow, not being the the first in the paragraph.
Normally CSS is my thing, but I'm somehow dumbfounded why this isn't working for me. I'm building a site through Cargo for CMS purposes and you can see it here: http://cargocollective.com/mikeballard
In my menu, I have five main categories, and clicking on them (images, for example) reveals the list of work under that category.
<div id="menu_2444167" class="link_link">
<a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
<a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>
Basically, I'm trying to select the last div in this set, and add a margin-bottom:15px to that div. I've tried using:
.project_link:last-child or .project_link:last-of-type but it doesn't seem to be working.
The HTML, which can't be altered too much to rely on Cargo, isn't great as if they had used list items, instead of divs with anchor tags I'm assuming this would be a lot easier.
The :last-of-type and :last-child selectors are not supported before IE9.
Class names, etc are not looked at when it comes to the :last-child and :last-of-type selectors. The .project_link:last-child selector will only trigger if the specific element is the last child in the parent element and has the class "project_link", and the .project_link:last-of-type selector will only trigger if the specific element is the last element of that type and has the class "project_link".
Both should trigger in a supporting browser, since it is implied as *.project_link:last-of-type and will check for every type of element inside that parent (which appears to only be divisions anyways). The last division shown here has the class "project_link" which would match this rule. The only reason these wouldn't trigger is if you had extra elements (or divisions) below what you're showing us, or you're using a browser which doesn't support it.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
Hi!
I'm trying to select a parent node of a specific node (with a specific className) to apply some CSS style to it.
As far as I know, there only exist CSS3 selector operands for child elements, descendant, following nodes etc... So only some "forward" selection in the DOM document is possible. When the selector applies to some section in the DOM document, always the last element the selector describes, is being selected. Am I wrong? I hope so!
How do you select the first <div> element in the following example? Let's say that there may exist a lot of other <div>s containing <p>s and I only want to select the <div>s containing a p.foo but not p.bar. Note that I want to select the <div> rather than the <p>!
<div>
<h1>Test</h1>
<p class="foo">Some text</p>
</div>
<div>
<h1>Test 2</h1>
<p class="bar">Some other text</p>
</div>
Thanks in advance!
Indeed a "parent selector" doesn't exist.
You can see the list of selectors here:
http://www.w3.org/TR/css3-selectors/#selectors
You could give your parent node an id and then select the parent with its id.
Otherwise I don't see any solution to access the div from bottom up using solely CSS.