I have some section with three children (one <h1> and two <div>)
<section class="half">
<h1>Half</h1>
<div>
left half
</div>
<div>
right half
</div>
</section>
Then I am adding some styles to these blocks
section > h1 { ... }
section > div { ... }
I want to specify additional styles for the first <div> element in the section.
I can't write use just section > :first-child because first child in section is <h1>.
So how I should write?
That's what :nth-of-type is for:
section > div:nth-of-type(1) {
/* CSS properties go here... */
}
You're looking for :first-of-type
Working jsFiddle Demo
No doubt, Joseph Silber answer is great. But if you don't want to use CSS3, here is the trick:
section > div { background: red; }
section > div + div { background: transparent; }
First, you select all div elements and set your properties to it. Then, you select second div and later and
reset those properties for it.
Using only section > div:nth-of-type(1) { will select first div element where parent element is section, and hence I feel will be a loose selector, make it stricter by using
section.half > div:nth-of-type(1) { /* This will select 1st div element inside
* section having class .half
*/
/* Styles goes here */
}
Demo
You can also use first-of-type Demo
section.half > div:first-of-type {
/* Styles goes here */
}
Related
I have a problem in that I'm trying to show an <aside> text inline when a mouse is hovering over a defined keyword. The way I planned to do this to utilize the <span>, which wraps the <aside> and then I could use CSS selectors like #main > article > .inline-aside, aside { display: none; } to choose the descendant <aside> elements within these special purpose regions.
I seem to be able to hide the contents, but not to get them back. The problem might be, I'm a total CSS rookie, the display: none somehow removes the element. Is there a way to accomplish this using CSS alone?
Here are the relevant pieces and I have a fuller Fiddle at https://jsfiddle.net/Veksi/z0d5j1xb/.
<article id="faq-section-general" class="tab-content">
<h1>General</h1>
<p>The four Byzantine <span class="inline-aside">generals.<aside>General inline aside.</aside></span></p>
<p>Some more general text.</p>
</article>
The thing is that you can't use <aside> inside of a <p>. The <aside> would then be moved outside of the <p> which changes your DOM what makes it impossible to select the <aside> on hover of the .inline-aside as you can't go back in the DOM.
However, if you change your <p> for example to a <div> the correct selector logic would look like the following:
/* By default, hide aside blocks that have .inline-aside elements as parents. */
#main > article .inline-aside aside {
display: none;
}
/* Show the aside elements inside .inline-aside elements when they're hovered. */
#main > article .inline-aside:hover aside {
display: inline; /* or block */
}
Updated JSFiddle.
try (for you code example)
tab-content > p > span.inline-aside:hover + aside{
display:block/*or anything else*/
}
EDIT
You can also use transition to make things smoother, like this :
tab-content > p > span.inline-aside:hover + aside{
display:block;
transition: all 0.5s ease-in-out;
}
If the <aside> element is not critical for you, you could consider using an inline element as pop-up text.
I modified your code to use another <span> inside the .inline-aside element. Check it out here: https://jsfiddle.net/z0d5j1xb/3/
Hope that's what you needed.
Also, a general recommendation - avoid using deep nesting in CSS like #main > article > .inline-aside.
you have three issues
1
the span is inline element but aside is a block element
you can't put a block element inside inline element
the issue is that when you do so the browser render the block element outside the inline element
you can turn span to div
2
your selector > mean a direct child not a descendant so you must include the p element in your selector #main > article > p > .inline-aside or just use the space selector #main .inline-aside
3
is that you can't hover an element with display: none; you should use visibility: hidden;
here is a solution but you can still do better
We can use javascript/jquery for hiding or displaying data on hover event check out the following code,, In the snippet when u hover on the generals word it will show the content
$(document).ready(function(){
$( ".inline-aside" ).hover(
function() {
$('aside').css( 'display','initial')},function(){$('aside').css('display','none')} );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<body>
<article id="faq-section-general" class="tab-content">
<h1>General</h1>
<p>The four Byzantine <span class="inline-aside">generals.<aside class="a" style="display:none">General inline aside.</aside></span></p>
<p>Some more general text.</p>
</article>
</body>
I have read Is there a CSS selector for the first direct child only? and http://www.w3schools.com/cssref/css_selectors.asp
I guess I have to apply the effect to the first-child of the <h1> tag, but I couldn't get it to work. So instead, I'm trying to use the nth-child, but still no luck.
JSFiddle
<section>
<article>
<h1>Test Details</h1>
<ul>
<li>Layer This</li>
<li>Layer That</li>
<li>Layers</li>
</ul>
</article>
</section>
<section>
<article>
<h1>Campaign details</h1>
<p>Text</p>
</article>
</section>
CSS
section {
padding:30px;
}
section article {
background:#EBEBEB;
}
section article h1 {
background:#0C79CB;
padding:10px;
}
/* This is where I am struggling */
section article h1:nth-child(2):before {
background-color:white !important;
content:'';
height:10px;
display:block;
}
If you open the fiddle, you'll note that the header has a blue background, and the content has a grey background. All I'm trying to do is to 'insert' a line of white:
Current:
Desired (note white between the blue and grey)
Please note, I know this is quite trivial if I just add a new div with a class, or even add a border-bottom:solid 5px white; to the <h1> tag, the point is I'm trying to learn about CSS selectors so is this possible using CSS Selectors?
:first-child can be used with or without knowing the element type.
You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.
You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.
To complete the example you are attempting using pseudo elements:
It is possible to use :nth-child(1) to select the first child like :first-child. Note: In this example it is pointless, as you will only have one <h1> per <article>.
section article h1 is given position: relative and it's position: absolute children will be positioned in relation to it.
The :after is given position: absolute and width: 100% in order to create a line at the bottom of your <h1> background.
Remember that the :after and :before pseudo elements are the equivalent of:
<h1>
<span>This is the :before</span>
I am the heading
<span>This is the :after</span>
</h1>
Have an example
CSS
section article h1 {
background:#0C79CB;
padding:10px 10px 20px;
position: relative;
}
/*
-- Select the first h1 child of article and generate a pseudo element.
*/
section article h1:nth-child(1):after {
background-color:white;
content:'';
height:10px;
width: 100%;
display:block;
position: absolute;
bottom: 0;
left: 0;
}
In your example, you're trying to select the second child of the h1, but that element doesn't have any children, and so it fails. You have to select the second child of the parent of the h1
section article :nth-child(2):before
This has the advantage that you don't put any tag name in there, so it will work even if one day you'll change the h1 to an h2, for example.
That last selector could be rewritten also to
section article :first-child:after
It's not the same thing, but you can also add generated content after an element (and in your case it'll be fine and work in the same way).
Or, if you want to match something against the h1, you need to target its next sibling, using the sibling selector
section article h1 + *:before
This selector will choose the first element (whatever kind it is) that appears right after an h1.
Or, inserting generated content after the element, you can use this
section article h1:after {
background-color: white !important;
content: '';
height: 10px;
display: block;
}
Which, in my opinion, is the simplest thing to do
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I am working in web scraping. Now i am scraping one website and load into my website its working fine. But i need to add css into one div. This div does not contain any id or class.
But my main div contain class. How can i css for my inner div
For example:
<div class="ct-ui-spinner-animation">
<div>
<div> <!-- I Want to call css in this div-->
Sample
</div>
</div>
</div>
I am trying this ways
First try:
.ct-ui-spinner-animation > div
{
color:#fff !important;
}
Second try
.ct-ui-spinner-animation {
color:#fff !important;
}
But not applying css please guide me. How can i do it.
Your code was almost there.
You need to use two child selectors:
.ct-ui-spinner-animation > div > div
{
color:#fff !important;
}
Notice this will be applied for all the div elements which are the grandchildren of any element with the .ct-ui-spinner-animation class.
.ct-ui-spinner-animation > div > div
{
//Styles
}
Can be like this:
.ct-ui-spinner-animation > div > div{
color:#fff !important;
}
http://jsfiddle.net/CCnMe/
or
.ct-ui-spinner-animation div {
color:#fff !important;
}
http://jsfiddle.net/CCnMe/1/
You could give a look at the first-child CSS attribute
.ct-ui-spinner-animation:first-child {
color:#fff !important;
}
Setting a specific class or id for your div is (very) slightly better for the performance too.
Since it's two nodes down, you need to use "div" or * to in the middle.
.ct-ui-spinner-animation > * > div
/* or */
.ct-ui-spinner-animation > div > div
You need to do this to access the second child div:
.ct-ui-spinner-animation div div
{
//CSS goes here;
}
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO