I'm sorry if this question seems uninformed and lacking own research, but I've tried searching anything I could think of on google but still couldn't find anything about it anymore.
A while back, I recall reading something about styles relative to the stylesheet they were declared from. I am not entirely sure if this is indeed what was meant on the page I read it, but I have no idea where I read about it exactly, so I wouldn't know where to look to check it. Anyway, this is the impression I got from it:
What I am looking for is a way to make this only select the span inside the div that also has the style tag in it.
<div>
<span class="special">Not red</span>
</div>
<div>
<style>.special {color:red;}</style>
<span class="special">Red</span>
</div>
I know this doesn't work, but I have no idea how to do this, or if it is even possible to insert a style tag within the body and then to apply styles either relative to that style tag.
If anyone has any idea on how this might be possible (without JavaScript), or if you're absolutely sure this is impossible to do without assigning seperate classes to the affected span, please tell me.
PS: the order in which the elements occur may differ, so div + div .special {color:red;} or div:last-child .special {color:red;} won't work.
I believe you're looking for <style scoped>
Here are a few links
http://css-tricks.com/saving-the-day-with-scoped-css/
http://caniuse.com/style-scoped (you'll want to be sure the browsers you are targeting can use it.)
So you nearly have it correct in your example, just add the scoped attribute.
Normal CSS would be to apply different classes to these spans. They're fundamentally different.
If you want to work around that, you could apply classes to their enclosing divs:
<div>
<span class="special">Not red</span>
</div>
<div class="div-special">
<span class="special">Red</span>
</div
And the CSS:
.div-special .special { color: red; }
EDIT You could add a second class to the second span and apply the color there <span class="special colored-red">
Related
I tried to solve this but I'm still blocked on an error like this lol.
I don't understand why my CSS does not apply to my HTML elements.
a{
text-decoration: none;
}
.test{
text-decoration: none;
}
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
I first tried with only the balise in CSS and after it doesn't work I tried with the "test" class. But it still doesn't work.
The other CSS of my page work. It is only on my balise ..
if anyone have an idea on how to solve my problem pls!
Thanks,
So, the behavior you experience is that defining CSS rules separately, based on the tag name or class name are not applied, yet, if you specify your CSS as an attribute value, then it's applied. Let's think together:
Rule by tagname
a{
text-decoration: none;
}
You reasonably expect this rule to be applied on the anchor, but it's not the case. This evidently means that some other CSS rule (or Javascript) overrides it. Browser Dev Tools can aid you, just right-click anywhere on your page and click on Inspect (or a similar choice). Inside the Dev Tools panel you should see an Elements tab, which shows the HTML and clicking on elements you should see CSS rules on the right-hand side, like on the picture below:
So, I advise you to click on the anchor where you expect your rule to be applied and see what CSS applies there. The rule that you intend to specify here will appear striked through, because something with higher priority overrides it (another case is that a rule with similar prio level is evaluated later and overrides this one). You should be able to see which text-decoration rule is applied and you can gently hover on that rule and click on its checkbox to disable it for now. This will enable the rule applying on this attribute with the second priority level in the hierarchy and so on. This process is not yet a solution, it's exploring the problem. After this exploration you will know what the problem is.
Rule by class
.test{
text-decoration: none;
}
The situation is either similar with the one described in the previous section (rule override due to higher priority or similar priority but later in the code), or, it's possible that for some reason the test class is removed from the tag. So, in the Elements tab of the browser console you will see whether that element still has the class. If not, then experiment by editing the tag and writing that class into it and see whether your rule applies or not. If the tag has the class, but the rule does not apply, then we have a similar issue as the one described in the previous section.
Solution
The best solution is to find out what the problem is, why are there other rules applied on this element and act accordingly. For now, you can apply a rule like
a.test#test {
text-decoration: none;
}
and of course add test as an id to your tag, as below:
<a href="#" class="test" id="test">
and if this still doesn't work, then there is a high chance that the other rule which causes you trouble has !important. If that's the case, then try removing the other rule. If that's not an option, then look at what the selector of the other rule is and make sure that the selector of your tag contradicts it.
It wasn't immediately clear from your initial post exactly what display problem was occurring. But in your comments you indicated an undesired text decoration is showing up, presumably in one of the html elements. Your initial post appears to show your initial efforts to correct the undesired decoration by re-defining the a element's css in your style.css sheet, which is intended to override the bootstrap css.
But your problem really appears to be related to which css is most specific to the element being displayed. The closer a style is to an element, the more precedence it has.
Each of the html elements within your a element have classes applied to them "card h-150","card-body","info-card","sub-info-card". That's a lot of classes to sort through.
<a href="#" class="test">
<div id="blue-card" class="card h-150">
<div class="card-body">
<p class="info-card"><strong><?php echo $_SESSION["_nbruser"] ?></strong></p>
<p class="sub-info-card">Utilisateurs actifs</p>
</div>
</div>
</a>
How those classes interact will take precedence over your a definition because they are more specific, in other words, closer to the element.
Trying to correct the problem by redefining the a element with an override like text-decoration: none!important will certainly work, but it is not good practice (see first answer here). You should look closely at what the invoked classes in your html elements do. If those classes aren't what you need, use a different class, or this could be a good opportunity for you to write your own custom class in the style.css. However, writing your own class if you're just beginning to get familiar with css may prove challenging. Probably better to find the class you really want from within bootstrap. That's the value of bootstrap.
To answer your original question which is basically why doesn't your css apply to your html elements, it's because a class is applied on the element and that takes precedence. CSS is tricky with specificity and it's hard to learn at first. See some of the answers in this post, and also this link mentioned in that same post.
Try accessing the 'link' attribute of the anchor tag as below and setting the value as none, also add !important to it, this worked for me.
a:link {
text-decoration: none!important;
}
I have this code:
<p class="alert-error">
<span></span>
<span></span>
<span></span>
</p>
I want to change the style of the CSS for "alert-error" when it shows <span></span>. The code is being generated by a system with limited backend customization. Sometimes the spans are filled with error messages.
The :empty selector doesn't seem to work cause I have to put it on the alert-error class.
Any help would be appreciated.
I'm guessing based on what I can surmise from your markup structure that you want to hide the entire .alert-error element, not the span elements as stated in the question title. It doesn't really make sense to display .alert-error itself if its children are empty, since that would just result in an empty box.
The problem is that :empty itself does not match an element if it has child elements, even when all the children themselves are :empty.
If CSS had a parent/has selector, you would theoretically be able to select .alert-error based on the fact that all its children are :empty. But since there doesn't exist such a selector in CSS yet, you will need to use JavaScript.
I made the css like this:
.alert-error span:empty {
background: green;
}
and it works, see jsfiddle
This question already has answers here:
Complex CSS selector for parent of active child [duplicate]
(10 answers)
Closed 9 years ago.
I'm trying to give a style to all <div> with children and not to those with no children.
Or, give style to all, and give a different style to those with no children.
The structure is similar to this
<div>
<div>
<div>
<div>Don't style me</div>
<div>Don't style me</div>
</div>
<div>Don't style me</div>
<div>Don't style me</div>
<div>
<div>
<div>Don't style me</div>
</div>
</div>
</div>
</div>
CSS level 4 is being worked on, and will include selectors that can do what you're asking.
When it does become available, the syntax will look like this:
.myclass! div { ... }
This will select the .myclass element that has a div element as a child. It's basically a normal CSS selector, but with the exclamation mark to tell it which element to select. (although note that the preferred syntax has changed a couple of times during the drafting process, and they've not finalised it yet!)
If you're interested in following up about this, you can read the full spec in its current form here: http://dev.w3.org/csswg/selectors4/
However that's in the future. For current browsers, what you want to achieve isn't really possible with pure CSS.
So what options do you have?
The most obvious work-around is to use javascript to achieve the effect you want. jQuery is perfectly capable of selecting elements in the way you've described, like so:
$('.myclass:has(div)');
Also obvious would be adding a class to the elements you want to style, and just using that. This could be done in Javascript or in your server-side code. Probably the most obvious answer, really, in the absence of an actual CSS selector you can use.
Depending on what you're trying to do, you could try re-arranging you HTML structure; in some cases, a bit of lateral thinking can help you achieve results that appear to do this, even with the CSS selectors available today. In particular, hover effects can often be worked around this way.
Again, depending on what your code looks like and what you're trying to do with it, you could try making use of some of the more esoteric CSS selectors. For example, div:empty will select divs that have no content. This won't work for the examples you've given (as you have text in the 'empty' divs), but would work in other cases where they really are empty.
It can be done in 2 ways :-
1) Giving a specific class to the parent div and the child div will inherit the style.
2) Giving class to divs individually.
The better option would be implementing via the 1st option.
Use the ">" operator.
Some documentation
Like div > div {}
http://jsfiddle.net/9tLXP/
div {
padding: 10px;
background: red;
}
div > div {
padding: 10px;
background: blue;
}
div > div > div {
padding: 10px;
background: orange;
}
div > div > div > div {
padding: 10px;
background: green;
}
Edit: Obviously I went ahead and styled each one with a different background color to demonstrate the point. In your case you would delete some of the extra styling I provided.
If you are truly looking to use the structure you posted, one where no classes or id's are assigned to any elements, then you can not accurately detect the bottom element in a group with n amount of children.
Operators such as > can give you a direct descendant but they can not tell you if it has any further children without further loops as Michael has shown. The issue therefore with Michaels method is you could not detect a div at level 3, and a div at level 4 and style them the same, as all div's at level 3 now inherit this style.
Long and the short - without adding in a class or 2 you can't accurately detect the bottom most child of a nested structure without effecting it's siblings.
is there any way to isolate a HTML element from the CSS? I am trying to make a and all it children from become "not visible" in a document.
The user is able to inform a css which is called on the document but I need to make sure that this won't get lost, I mean, no display:none, visibility:hidden, text-indent:-10000px, left:-10000px, or any other of these tricks.
<div class="foo">
link
<img src="" />
<span>bar</span>
</div>
I could use a data:text/html;base64 iframe, but then the text won't be formatted.
Think about a disclaimer or a logomark. The user can include his own CSS (by informing the CSS URL) on my widget and I need to keep that disclaimer visible even the user specifies an display:none or text-indent on his CSS for that disclaimer element or any of it's children.
I am not trying to use no style, I just wanna know if there is any attribute to shield a <tag/>, something like "-moz-user-select: none;"
As previous answers pointed out, there is no attribute to do that, and the !important approach won't work either, why? mainly because the users can use their own css, and if the user places !important in every style attribute, it will overwrite previous !important tagged attributes, here's an example:
Site.css
.copyright { display: block !important; /* other styles here */ }
Uploaded css
.copyright { display: none !important; /* ... */ }
The only way you may overcome it is reading the uploaded stylesheet and remove every !important, in that case you could use !important to avoid the style attribute to be overwritten.
EDIT:
But you will have to actively declare every single attribute the user might use to hide elements.
There isn't anything that will work 100% of the time, but here's a solution that will work in most cases:
<div class="foo" style="background:#fff !important;color:#000 !important;position:relative !important;display:block !important;visibility:visible !important;opacity:1 !important;float:none !important;left:0 !important;top:0 !important;">
link
<img src="" style="background:#fff !important;color:#000 !important;position:relative !important;display:inline !important;visibility:visible !important;opacity:1 !important;float:none !important;left:0 !important;top:0 !important;" />
<span style="background:#fff !important;color:#000 !important;position:relative !important;display:inline !important;visibility:visible !important;opacity:1 !important;float:none !important;left:0 !important;top:0 !important;">bar</span>
</div>
Basically, you want to specify !important for every style you don't want overridden in the style attribute. It's a huge pain if done manually, and like I said before, can be worked around by someone who's fluent with CSS.
Note: The styles provided are not an exhaustive list, just things I can think of off the top of my head.
About CSS Specificity
No, there is no attribute to shield a tag.
I'd like to change this:
<a href='foo'>
<div> Moo </div>
</a>
to be standards compliant (you're not supposed to have block elements in inline elements). Wiring javascript to the divs just for navigation seems like a hack and degrades accessibility.. In this case, my requirements are for 2 sets of borders on my fixed-dimension links, so the above non-compliant code works perfectly after applying styles.
Also, is "a { display:block; }" a legal way to circumvent the validation?
Why not use a <span> rather than a <div> and set display:block on both elements?
Additionally, to answer your latter question: I don't believe adding display:block; to your anchor will make it pass validation. The validator checks to see if you're following (X)HTML rules, not how to present the page to the user.
You may want to consider putting the div outside the a if it is only for display purposes, unless it's important that the outer border be clickable. Either this:
<div class="dbl_border_links">Blah text</div>
or this:
<a class="dbl_border_links" href="blah"><span>Blah text</span></a>
will work and you can use something like this:
<style>
.dbl_border_links, .dbl_border_links>* {
display: block;
border: 1px solid;
padding: 1px;
}
.dbl_border_links {
border-color: red;
}
.dbl_border_links > * {
border-color: blue;
}
</style>
to specify the styles. Personally I'd go with the div containing the a but either approach works.
I normally consider the <a > tag to be a special case for this purpose. You ought to be able to apply that to just about anything- it is after kind of the whole point of hypertext (<tr > comes to mind a good example). But if you have to pass a validator somewhere I understand.
Could you use a javascript onclick handler for the div, and eliminate the anchor entirely?
Firstly, there is certainly nothing wrong with giving an anchor display:block; I'd say it's one of the more common things people do with CSS and is perfectly standards compliant. Secondly, there are a number of ways to achieve a double border on an HTML element. For one thing, check out the "outline" property:
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
Admittedly, this will only work in the more modern browsers but should degrade gracefully as the outline doesn't take up any space in the page. If the contents of the link is to be an image you can simply give the <a> a little padding and a background colour as well as a normal border (in another colour) to create the impression of a double border. Or give the image a border of its own. Of course you can also do something along the lines of your original idea, though nesting your HTML the other way around, and simply assigning a different border to each element. Or you can use an inline element inside the link (like a <span> or an <em> or something) which you also set to display:block; (yes, this is also valid!). Happy coding!
If I understand correctly your intentions, you should place, as already mentioned, the div outside the anchor, and, to get the same presentation, make the anchor width:100%;height:100%. Cross Browser milage may vary.
Also, you could dump the div altogether and give the anchor display:block;
What are you exactly trying to do?