I have a simple HTML structure, which I want to show only the second DIV with class "entry":
<div id="wrapper">
<div class="highlight">Hightlight</div>
<div class="entry">Entry 1</div>
<div class="entry">Entry 2</div>
<div class="entry">Entry 3</div>
<div class="entry">Entry 4</div>
</div>
Therefore I use nth-child(x) pseudo selector trying to achieve it:
#wrapper .entry {
display: none;
}
#wrapper .entry:nth-child(2) {
display: block;
}
But end up, "Entry 1" shows up instead. How does :nth-child(x) count? It ignores the selector .entry completely and just count the occurrence of <div> class.
Demo : JSFiddle
It ignores the selector .entry completely and just count the occurrence of <div> class.
That's almost correct. How it works is:
it takes all the div elements with class entry
it takes all the div elements that are 2nd element of it's parent
it takes an intersection of 1) and 2)
What you really want is something like nth-of-class, which is not a thing (I think there is a proposal to add it in next version of CSS).
You should do rather this
#wrapper .entry { /* hiding first */
display: none;
}
#wrapper .entry + .entry /* showing second and following */
{
display: block;
}
#wrapper .entry + .entry + .entry /* hiding third and following */
{
display:none;
}
not that pretty but will work.
Check it here: http://jsfiddle.net/rwvzq4sL/1/
Related
I have a h3 tag which is deeply nested as follows and can't amend the component that contains
this styling.
Instead since I only have 1 h3 within this nest, trying to target it and amend its padding.
But this is not working. Can I know what I am doing wrong? I am doing something similar for another
div tag targeting the 6th position for that div. That works fine. Issue is with targetting this h3
tag. Tried adding !important to these styling which makes no diff. What am I doing wrong here?
This is the structure of the html currently.
// This is the only div I created passing in my custom styling and the component is wrapped within this.
<div className={styles.main}>
// all the following is coming from an external component I can't amend.
<div>
<div>
<div>
<div>
<span>some span text 1</span>
<div>some span text 2</div> <!-- also targetting this div and this works fine. See CSS below -->
</div>
<div></div>
</div>
</div>
<div>
<div>
<div>
<h3> <!-- This is the only h3 in entire nest -->
Some Random Text <!-- trying to give this a left padding -->
</h3>
</div>
</div>
</div>
</div>
</div>
My SCSS File
.main > div:nth-child(5) {
padding-top: 100px; // this works fine
}
// tried all the following. None of them works. I do not get the padding left 50px;
// The text is stuck to the left with no margin / padding.
.main > h3 {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-of-type {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-child {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
The problem is that you are using the direct descendant selector.
You are only selecting h3 elements that are direct children of .main
You need to modify your selector to select children/grandchildren/etc.
.main h3 {
...
}
Here is my HTML and CSS:
.wrapper > p:first-of-type {
margin-bottom: 20px;
}
<div class="wrapper">
<p>...</p>
<p>...</p>
</div>
However, the margin property is being applied to both elements. What's wrong?
It is not applied to the first element only, but the second element was not applied to it
And even if applied to it you did not notice that because the margin is down and the last element
There are two extra rules you can put into your CSS that will show you that your first-of-type selector is working correctly. Firstly, you can add
* {
margin: 0
}
Most browsers, by default, add a margin-top and margin-bottom to all <p> elements. If you do not explicitly eliminate this, sometimes called a CSS reset, it will always be used. getting rid of it allows you to see that only your top <p> element has a margin on the bottom.
If you still have trouble seeing this, you can add
p {
border: 1px solid green
}
Having a border will show you more clearly that the top paragraph has a margin and the bottom one does not. Add a third <p> for the result to stand out more starkly.
* {
margin: 0
}
.wrapper > p:first-of-type {
margin-bottom: 20px;
}
p {
border: 1px solid green
}
<div class="wrapper">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
I have css rule as follows,
.wrapper > h3{
color:red;
}
The html code,
<div class='wrapper'>
<h3>Text1</h3>
</div>
<div class='wrapper'>
<div data-ui-view=''>
<h3>Text2</h3>
</div>
</div>
Here is the plunker. The Text1 is shown in red colour but Text2 is not. I understood that this rule
will take the immediate <h3> element under .wrapper. In angularjs most of the time the elements will be wrapped under tag. So, I want to make a rule such that whenever an <h3> tag comes inside .wrapper class then it has to be in red colour. irrespective of <h3>'s parent elements. Is there a way to do it?
Simply make the rule:
.wrapper h3 { color: red; }
This will make all <h3> elements within the .wrapper class red
If you did want to target the grandchild element as your question title suggests you could use this rule:
.wrapper > * > h3 { color: red; }
I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.
My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?
Current Solution:
External CSS:
div.test1 {
color: purple;
background-color: #d8da3d
}
.test2 {
color: red;
background-color: #d8da3d
}
#test3{
color: green;
background-color: #d8da3d
}
HTML body code:
<div class="test1">
<p> Style1
</div>
<div class="test2">
<p> Style2
</div>
<div id="test3">
<p> Style3
</div>
My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html
- 1
Take a look at this:
https://stackoverflow.com/a/17668004/1552518
- 2
Or just add a class to each div:
<div id="container">
<div class='div1'>
style1
</div>
<div class='div2'>
Style2
</div>
</div>
And in your external css:
.div1 {
// Style applied only to the first div
}
.div2 {
// Style applied only to the second div
}
- 3
Or if you can't add a class to the divs use this in css:
#container > div:first-child {
// Style applied only to the first div
}
#container > div:last-child {
// Style applied only to the second div
}
Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?
From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class
When you use the css styling:
body{
color:purple;
background-color: #d8da3d
}
You are saying that you want to style the entire body of the document with the styling you have set.
In order to target specific elements you should give those elements an id or class.
For example:
<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>
Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:
#test1{
color:blue;
background-color:black;
}
.testing{
color:red;
background-color:white;
}
Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.
I have a .page div element, with multiple children, of types header, div and footer.
My goal is to give the last of the children elements of the .page element a larger margin, but this does not do the job:
.page:last-child { margin-bottom:2em; }
Neither does this:
.page :last-child { margin-bottom:2em; }
How should I use the operator?
EDIT: An example of the HTML:
<div class="page">
<header>...</header>
<div class="container">...</div>
<div class="grayback">...</div>
<div class="container">...</div>
</div>
<footer>...</footer>
So I would need the second container to have the extra margin.
I think this is what you're looking for
.page :last-child {
margin-bottom:2em;
}
Allows any element.
Fiddle