How to select DOM parent from child in CSS [duplicate] - html

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
is it possible to effect a parent node based on a child node's :hover state? ie.
nav ul li a:hover {
/* something here to effect the li or the ul or the nav elements */
}
not that bothered about compatibility, I am looking to be using latest firefox/chrome and ie9/10 only based on the target audience of the app. So CSS3 and browser specific CSS is fine, though I would like to avoid jQuery (and javascript in general) if possible.

Its not possible right now, as you can only style downstream siblings or descendants while hovering other another element (as of Selectors Level 3)
However, when Selectors Level 4 becomes stable and UA's start implementing it, you can eventually use the parent combinator - e.g.
<h2>Hello<span>World</span></h2>
h2! > span:hover {
background: azure; /*the h2 background changes while hovering over the span */
}

You should better use javascript onmousehover event instead.
Something like,
<script>
function onhoverstylechange()
{
document.getElementById("id").style.color='red';
}
</script>
<div id="id">
Change
</div>
and just apply any css or css file in the javascript function.

Related

Select all, except -CSS [duplicate]

This question already has answers here:
How to create a css rule for all elements except one class?
(3 answers)
Closed 8 months ago.
How do I select all but one instance of an element?
for example, my link or <a> elements have a particular color, but there's this one a element I don't want the color to to apply.
I want the link element to have the same color as the remaining text
There is a :not selector in CSS. This will apply styles to everything, except elements that the not selector will target.
So, you could style the colors of all anchor tags except ones that you put a specific class on like:
a:not(.dontBeRed) {
color: red;
}
You can also target exceptions other ways. Lets say you have a few custom color utility classes, you could ignore elements that have any class with a certain prefix.
This will style all anchors red unless they have a class that starts with u-color on them.
a:not([class*='u-color']) {
color: red;
}
.u-color--green {
color: green;
}
.u-color--blue {
color: blue;
}

Advanced element selector with element prefix does not work in Chrome [duplicate]

This question already has answers here:
:not() selector not behaving the same between Safari and Chrome/Firefox
(2 answers)
Closed 5 years ago.
I am having problems with an advanced negation pseudo-class selector in a :not(s) selector (!!in Google Chrome!!).
I have this HTML markup:
<div class="body">
<div class="container">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-1 element-offset-2"></div>
<div class="element-3"></div>
</div>
</div>
And I use the following CSS to have a margin-left on every element- element (except the first one):
div[class*="element-"] + div[class*="element-"] {
margin-left: 1%;
}
See https://jsfiddle.net/em6hefqj/2/ for a working example.
But here is the problem, I don't want the element with the class element-offset-n to have the margin-left. I use the following CSS for that:
div[class*="element-"] + div[class*="element-"]:not([class*="element-offset-"]) {
margin-left: 1%;
}
See https://jsfiddle.net/em6hefqj/ for a working example.
As you can see above, I use [class*="element-offset-"], but I have to use div[class*="element-offset-"]. I cannot use the advanced selector without the element prefix because it will cause conflicts between different elements on the same page (div, p and a few more). This works (what I have tested) in Safari and Firefox, but it does not work in Google Chrome See https://jsfiddle.net/em6hefqj/1/ for a (in Chrome) not working example.
Here are some images for reference:
Chrome (works without div in front of the selector):
Safari (works with div in front of the selector):
Chrome (does not work with div in front of the selector):
I hope you can help me with this, I am open to suggestions. This might be a bug if so I'll report it to the Chrome developer team.
:not() only takes a "simple" selector according to the spec.
You can use the classic CSS approach of giving two rules, with the second overriding the first if applicable:
div[class*="element-"] + div[class*="element-"] {
margin-left: 1%;
}
div[class*="element-"] + div[class*="element-"][class*="element-offset-"]) {
margin-left: 0;
}
I believe Chrome is correct here (At least as per current standard)
documentation:
6.6.7. The negation pseudo-class
The negation pseudo-class, :not(X), is a functional notation taking
a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its
argument.
w3c doc
I think this is a cross browser compatibility issue. This could help https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS

Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]

This question already has answers here:
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
(10 answers)
Closed 8 years ago.
I have an application where styles are defined as
select {
border: 1px solid #6FA7D1;
outline:0;
height:25px;
padding-left: 5px;
font-family:Arial;
font-size:12px;
transition: all 0.8s;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
so, every <select></select> will get the same style, which is expected, but, I'm using some third party plugins like jqGrid and I don't want to apply same style on for instance <select> rendered in jqGrid pager. This <select> has some class.
Is there some way to tell in CSS not to apply on DOM with certain class?
Please don't focus strictly on this <select> in jqGrid, I have more situations when I can use such exclusion.
You can use the :not selector to prevent application under certain circumstances, e.g:
:not(selector) select
Where selector relates to either a jQGrid id or class
The negation CSS pseudo-class, :not(X), is a functional notation
taking a simple selector X as an argument. It matches an element that
is not represented by the argument. X must not contain another
negation selector.
This basically says target select elements which arent a child of selector (in this case jQGrid)
You can use :not to exclude any subset of matched elements.
:not(div) > span {
color: red;
}
<span>Make me red!</span>
<div><span>...but not me...</span>
</div>
http://jsfiddle.net/iaezzy/1s5g5mjn/
.element:not(.exclude) {
background: green;
}
.exclude {
background:red;
}
What about Can I write a CSS selector selecting elements NOT having a certain class? in CSS3?
select:not(.someClass) {
/* Styles */
}
You can't, the only option would be to:
Put the <select> styling into a class, e.g. .select, and add that <select class="select"> to all elements that you want to be styled.
Add a class, e.g. select-jqGrid, that overrides all default styling from the select and add that to all <select> elements inside the jqGrid.

Selecting all links except hovered one CSS only

I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).

Bootstrap overriding my style [duplicate]

This question already has answers here:
Twitter bootstrap override `a` in `navbar`
(3 answers)
Closed 9 years ago.
bootstrap.css is overriding my style... How can I avoid this to happen? How can I force the css to load first?
One thing that is a problem is that the website where it needs to be is using #import to load the css files (this cannot be changed, the customer doesn't want to change that).
Any ideas?
***Note****
I cannot modify the current site at all. I just have to include bootstrap.css without overriding anything else. Is this possible?
You need to write a more specific selector. Remember that ID has the most weight. You can temporarily mark it with !important to check if you are targeting it correctly.
If you are targeting a anchor in a list item for example then to overwrite the reset styles you can write something like nav ul li a{color: black;}
You simply have to increase the specificity of your rules. This means adding more to your selectors, say you have .elem { color: blue; }, you can make it .parent .elem { color: blue; }
Or using !important, like .elem { color: blue !important; }