I have two sets of markup on my page:
<div class="row">
<div>Some random div(s)</div>
<table></table>
</div>
and
<div class="row">
<div>Some random div(s)</div>
<h1>Table Title</h1>
<table></table>
</div>
I would like to apply margin-top and some other CSS customizations to div.row > table when there is no h1 in div.row.
For example, in the above markup the first table would be styled but the second would not.
I can't find a convenient way to setup a rule for that set of conditions. I'm quite new to SASS and don't want to have to add a specific class to the table element.
Do you have any tips on what to do to achieve this?
As you are looking to style a table which always appears after an adjacent h1 element this is achievable in CSS by using a combination of the :not() and next-sibling (+) selectors.
.row > :not(h1) + table
The rule will match any table element which is directly preceded by an element which is not an h1 which is an immediate child of an element with the class .row.
.row > :not(h1) + table {
border: 1px solid blue;
margin-top: 10px;
}
<div class="row">
<div>Some random div(s)</div>
<table>
<tr>
<td>This will match the rule</td>
</tr>
</table>
</div>
<div class="row">
<div>Some random div(s)</div>
<h1>Table Title</h1>
<table>
<tr>
<td>This will not match the rule</td>
</tr>
</table>
</div>
SASS ultimately compiles down to CSS, and according to the CSS rules, such a selector is not possible. You will have to do it via scripting (javascript, jQuery). There have been a lot of questions about this. Check these references:
Apply CSS styles to an element depending on its child elements
CSS selector for “foo that contains bar”?
Is there a CSS parent selector?
Finally, check this link for the reasons why we don't have the parent selector option.
Related
I have :
<div class="myclass">
<div >
<div>
<div>
</div>
</div>
</div>
</div>
Ok, I'm using .myclass div:first-child {} to give style to the first div but I discover how the style is applied by inheritance to the nested divs....????
Any idea what I'm doing bad ?
.myclass > div:first-child {} will only affect the direct child div.
More information on the various selectors available is here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
I have the following HTML:
<div class="row">
<p> Text </p>
</div>
<div class="row">
<p> Text </p>
<p> Text </p>
</div>
I want to apply different styles to all elements that are an only child in the row. I know I can do this for the para as below:
.row p:only-child{
//apply your styles
}
My question is simple: Is there any shorthand way to apply the ::only-child styling to all elements in the row parent (e.g. other divs), or do I have to mark it up endlessly as:
.row .class1:only-child{
//apply your styles
}
.row class2:only-child{
//apply your styles
}
There are two different levels of this:
.row *:only-child
Selects all children of .row that are the only child, where as
.row > *:only:child
Selects all the direct children of .row that are the only child. Note that you don't actually need the * as it will be implied if you just use the :only-child selector. Which would make your selector look like .row > :only-child.
So, in the following example:
<div class="row">
<p id="p1">Text goes here</p>
</div>
<div class="row">
<p id="p2"><span id="span1">Text</span></p>
<p id="p3">More text is here</p>
</div>
The first selector will select #p1 and #span1, where as the second will only select #p1
you could do
.row .class1:only-child, .row.class2:only-child{
//apply your styles
}
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.
Suppose we have this html
<div class="a">
<div>...</div>
...
<div id="b">xyz</div>
</div>
<div class="a">
<div>...</div>
...
<div id="c">abc</div>
</div>
Applying some style on #b upon targeting it in url is easy to do with the css :target selector.
Is it possible to apply some some style on the parent div with class="a" as well?
No, since you would need a CSS parent selector for that. Nothing in CSS2 and CSS3 has been specified for that. CSS4 does have (a somewhat) parent selector (called the subject selector) using the ! symbol, but no browser supports it (yet).
You can add an extra id to your <div class="a"> and make it:
<div class="a" id="abc">
...and still use the :target.
No, CSS cascades (CSS = Cascading Style Sheets), it doesn't go up.
You will need to explicitly apply styling to the parent element.
You would be better doing something like #otinanai suggested and adding a class to your child divs. e.g.
HTML
<div class="a">
<div>...</div>
...
<div class="aItem" id="b">xyz</div>
</div>
<div class="a">
<div>...</div>
...
<div class="aItem" id="c">abc</div>
</div>
CSS
.a {
border: 1px solid #000;
}
.aItem {
color: #999;
}
So you will use classes to consistently style your elements. Otherwise you will have to write CSS for D, E, F G through to Z, and only use the ID's for bookingmarking/URL purposes.
Would you please explain me the difference between these two CSS classes syntax:
.element .symbol {}
and
.element.large .symbol {}
I don't understand the difference between the two. The first line indicates two different classes to which are applied the same styles. But about the second, what's the meaning of '.large' which is written attached to '.element'?
.element .symbol
means .symbol inside .element
.element.symbol
means .element that has the class symbol as well.
So,
.element.large .symbol
means .symbol inside .element that has the class large as well.
I think you got a slight misunderstanding what the first one means.
.element .symbol {}
Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.
<div class="element">
<div class="symbol" />
</div>
In this example your first CSS entry would affect the <div> tag in the middle.
Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.
<div class="element large">
<div class="symbol" />
</div>
So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.
If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:
.element, .symbol {}
Edit: By request the link to the documentation of the CSS selectors.
Using
.element.large
refers to an element with both classes:
<div class="element large"></div>
rather than a descendant of an element:
.element .large
meaning that in:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
is 'receiving' the styles.
Basically, being separated by a space implies two elements with a descendant relationship.
You would use .element .symbol this where you have an element inside of another element. For example:
<div class="element">
<i class="symbol"></i>
</div>
If down the road you wanted to differentiate some divs, you could add an additional class to target only those that differ, and target it with .element.large .symbol. So, for example:
<div class="element large">
<i class="symbol"></i>
</div>
In your second example, the first part of the selector is simply an element with two classes, as in <span class="element large"> or <span class="large element">.
In general, each part of a selector applies to one HTML element.
table[border].clname means a table with a border attribute and a class of clname, while table [border] .clname means an element with class clname, in an element with a border attribute, in a table.
(Edit: well, I say "one HTML element", but of course you can have more than one table that this applies to. You understand.)
Without whitespace, you are simply more specific with the selector. Because classes can appear several times in the html dom. But two or more classes in one element is rarer and therefore more precise.
Selectors with a whitespace (.a1 .b2) say search for the class a1 and see if there is a child or child-child element with the class b2 in this element.
An even higher degree of accuracy can be achieved with the >selector (.a1 .b2 > span). This states that only span elements should be taken into account which are direct children of the class .b2 located within an element with the class a1.
.a1 .b1 {
color: green;
}
.a1.a2 .b1 {
color: red;
}
.a1.a2 .b2 {
font-style: italic;
font-weight: bold;
}
.a1.a2 .b2 > span {
color: orange;
}
<div class="a1">
<div class="b1">Hello France</div>
<div class="b1">Hello Spain</div>
<div class="b2">Hello Sweden</div>
</div>
<hr/>
<div class="a1 a2">
<div class="b1">Bye France</div>
<div class="b1">Bye Spain</div>
<div class="b2">
Bye
<span>World</span>
</div>
</div>