This question already has answers here:
CSS negation pseudo-class :not() for parent/ancestor elements
(2 answers)
Closed 3 years ago.
I want to apply some css on the basis of dir rtl attribute on body tag
My earlier implementation was below one which was not working
:not([dir="rtl"]) nav > ul > li:last-child a {
padding-right: 0;
margin-right: 0;
}
By mentioning body tag its working fine and I am not able to get the reason of same. Any help will be highly appreciated.
body:not([dir="rtl"]) nav > ul > li:last-child a {
padding-right: 0;
margin-right: 0;
}
:not([dir="rtl"]) will effect any element with no [dir="rtl"], means even if the body have it, if any of the elements inside will not have it it still will apply to the child li. Even if the element extend the style, it will apply to it, since its not have the attribute dir with the value rtl.
When you add the body selector, the css will apply only when the body not have this attribute, but if it have, the fact that other elements not have it will not effect.
Assuming you have a DOM structure like
<html>
<head></head>
<body dir="rtl">
<nav>
<ul>
<li>
<a>select me when not rtl</a>
</li>
</ul>
</nav>
</body>
</html>
then your rule will still see the <html> element as being :not([dir="rtl"]) and thus your rule will still be active, whatever the attribute value on your <body>.
console.log( document.querySelector(':not([dir="rtl"])') ); // <html>
The problem with your earlier version of the CSS is that the first part of the selector :not([dir="rtl"]) could match the <html> element instead of the <body> element, or any other intermediate container between the <body> and the <nav>, which probably has not the dir attribute set.
Related
On this page, I want to hide the incorrect HTML displayed above the logo. It is generated by an old plugin we are replacing soon.
To start with, I tried the CSS:
.vine-home-block-grapes:first-child {display: none;}
but this does not remove the highlighted block below:
Can you help me determine why please?
Use css :first-of-type selector
.vine-home-block-grapes:first-of-type{
display:none;
}
That selector won't work as the element you are attempting to select is not the :first-child of its parent.
One way to do what you want is select all elements with that class name, set their styles as you wish and then, using a new rule with the sibling selector, override those styles for any element of that class appearing later in the parent.
.vine-home-block-grapes{
display:none;
}
.vine-home-block-grapes~.vine-home-block-grapes{
display:block;
}
Add this script. It would work fine without any problem:
<script>
var fourthChild = document.body.getElementsByTagName("div")[0];
document.body.removeChild(fourthChild);
</script>
Thanks to #FelixKling
Try wrapping the child elements in a <div> so the element can BE the first child of its wrapping element. Right now, your element is not the first child of <body> See the experiment here to show how :first-child doesn't work as expected, because really it's not the first child of its parent.
p:first-child {
background-color: aqua;
}
.vino:first-child {
background-color: lightgreen;
}
WORKS
<p>First</p>
<p>Second</p>
<p>Third</p>
DOESN'T WORK (because none of these are the first child of its parent, in this case, <body>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
Adding a wrapping div works.
<div>
<p class="vino">First</p>
<p class="vino">Second</p>
<p class="vino">Third</p>
</div>
I want to change the style of my li tag for particular div means I want to show that element for whole page,but at start I don't want to show that li tag. I want to change style of that tag.
<ul id="butons_right">
<li>
Top
</li>
<li>
<div id="close"></div>
</li>
</ul>
this is my that element which dont want to show it at start of page. I want to change its style to display:none.
Can anybody provide me any solution.
Thanks in advance.
In CSS:
#butons_right>li {
display: none;
}
However assign something to that tag so you can select that particular tag. I'm not sure which li tag you want to hide.
If it's the first li tag, use li:first-child. If not, assign a class to it, say, hidden, and then use .hidden (#butons_right>.hidden, or just .hidden).
Use the nth-child css selector to select a specific li though CSS:
Here is the example:
#butons_right > li:nth-child(1){
/*your css*/
}
And to hide the first li use the display:none property in css.
Your initial code should state
selector {
visibility:hidden;
}
Once the document is loaded or whatever event of your interest arise, you can modify the style with
selector {
visibility:visible;
}
The visibility property has the benefit of not re-arrange your lay out boxes.
The display property , gets out from the flow your element when is set to none. When you modify it again to return to visibility, the lay out will be affected
Which selector to use
It depends on your preferences/needs
You could apply an id or a class in your markup as "close" and the in your css use
#butons_right li.close {
visibility:hidden;
}
This selector is well implemented cross browser an will work fine with quite strong specificity.
If not you may use (if it is suitable) first-child, last-child or nth-child(n) to target your desired li element
I came across html>body in one of the stylesheets and wanted to know as to why it is used.
html>body {
font-size: 16px;
font-size: 78.75%;
}
It's called a Child Selector.
The reason it's being used is likely because it's a hack to exclude IE6 and below. Those browsers don't understand the > selector.
More Information
the '>' means that it is referencing on child elements of the parent (in this case 'html')
so for example I could have an arrangement of divs that look like so
<div id="outermost">
<div class="inner">
<div class="inner">
</div>
</div>
</div>
and i wrote some css like so
#outermost>.inner { background-color: #CCC; }
it would only apply the rules to the first level '#inner'
Obviously there is only one body tag however it used to be a hack to exclude ie6 and below to write different rules for ie7+ ;)
Child selector, more info here: http://www.w3.org/TR/CSS2/selector.html#child-selectors
So in your code it would be any body child of html
'> symbol indicates child of
Above code means
The style applies to all the tag body which is a child of html
#sample>div
above applies to all divs which are children of the element with id sample
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')
I am having a problem trying to find any specific details on how to properly write CSS rules in a stylesheet where the class or ID is nested within many other IDs and styles, e.g.
.mainbody #container #header #toprightsearch .searchbox {}
So here we have a searchbox class within a toprightsearch ID, in a header ID, in a container ID, in a mainbody class.
But it appears to work properly if I omit some of the IDs.
What is the correct way of listing these?
If I include all of the parents does it make it more specific?
Can it error on different browsers if I don't include all?
And any additional information on this topic would be appreciated.
Thanks
.searchbox {}
Styles anything with .searchbox
.mainbody .searchbox{}
Styles any .searchbox that descends from any .mainbody, direct child, grandchild, quadruple great grandchild, doesn't matter.
#toprightsearch > .searchbox {}
Styles only .searchboxes that are direct children of #toprightsearch
#container * .searchbox {}
Styles .searchbox's that are grandchild or later of #container.
Here's a good document on the topic: w3C selectors
If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.
There is no correct number of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2 means a selector2 at any level inside a selector1, and you can tune that for whatever behavior you need.
In your example, you should list .mainbody #container #header #toprightsearch .searchbox if what you mean is for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxes that exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.
Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.
Id's are specific to the page. So you'd just use
#toprightsearch {
stylename: stylevalue;
}
If your looking for nested classes then the correct format is
.header .textBoxes {
stylename: stylevalue;
}
If you know the exact child of a parent then you use the > sign. So if your document was like this:
<div class="header">
<div class="menu">
<input type="text" class="textBox" />
</div>
</div>
You can use this:
.header > .menu > .textBox {somestyle:somevalue;}
This means only items with a .textBox class directly inside of a .menu class item which is itself directly below an element with a class of .header.
From the W3 Selectors Documentation:
Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.
So in short, no you do not have to include all of the parent elements, and should not cause any cross-browser problems. However, with this selector:
.mainbody .searchbox {}
The styles defined will apply to any element with a class of searchbox whether it descends directly or indirectly from an element with class mainbody.
With your proposed selector, however:
.mainbody #container #header #toprightsearch .searchbox {}
The styles defined are more specific, and so only elements that descend from an element with class mainbody, then the elements with IDs of #container, #header, #toprightsearch in that order and that have a class name searchbox will have the defined styles applied.
Theoretically, an ID should only be used for one specific item on a page. So you should only have one item with an ID of toprightsearch so, for your CSS to work you only need to indicate:
#toprightsearch .searchbox {}
because there is only one item on your page with an ID of toprightsearch, All the other selectors are unnecessary.
If you have two items on your page with an ID of toprightsearch then that is bad coding practice.
The code below does what it says (at least in Firefox). it colors the input red
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
background-color:red;
}
</style>
</head>
<body class="mainbody">
<div id="container">
<div id="header">
<div id="toprightsearch">
<input type="text" class="searchbox" />
</div>
</div>
</div>
</body>
</html>
I think you should see if there went anything wrong in spelling the ID's and classes.