Target first element of DIV using CSS
You need .mydiv li table:first-child
.
More information.
:first-child
works in IE7+ and all modern browsers.
An example.
.mydiv li + table
isn't working for you because that matches something like this:
<div class="mydiv">
<li></li>
<table>My WYSIWYG</table>
</div>
Also note that there are few things wrong with your HTML:
<div class="mydiv">
<li>
<table>My WYSIWYG</table>
</li>
</table>
</table>
at the end should be</div>
.- The
div
should be aul
, becauseli
is not a valid child ofdiv
.
I've fixed these things in the demo above.
css selector for first element inside a div
Try this
div > .ui-select-match > span {
width:60%;
display:block;
}
hope will help
Target element if it is the first element inside a div
:first-child
should definitely work out for you.
.test { border: 1px solid black; margin: 0 0 10px;}.test h3:first-child { color: red;}
<div class="test"> <h3>H3 - should be red</h3></div><div class="test"> <p>p</p> <h3>H3 - should be black</h3></div>
Target the first element only if it has other siblings
.grid > .content:first-child:not(:only-child) { color: blue;}
<div class="grid"> <div class="content">I WANT TO APPLY CSS TO THIS</div> <div class="content">But only if there is 2nd .content element in the same parent element</div></div><div class="grid"> <div class="content">Don't apply here</div></div><div class="grid"> <div class="content">Don't apply here</div></div><div class="grid"> <div class="content">I WANT TO APPLY CSS TO THIS</div> <div class="content">But only if there is 2nd .content element in the same parent element</div></div>
CSS selector for first element with class
This is one of the most well-known examples of authors misunderstanding how :first-child
works. Introduced in CSS2, the :first-child
pseudo-class represents the very first child of its parent. That's it. There's a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector. Due to the way selectors work (see here for an explanation), that is simply not true.
Selectors level 3 introduces a :first-of-type
pseudo-class, which represents the first element among siblings of its element type. This answer explains, with illustrations, the difference between :first-child
and :first-of-type
. However, as with :first-child
, it does not look at any other conditions or attributes. In HTML, the element type is represented by the tag name. In the question, that type is p
.
Unfortunately, there is no similar :first-of-class
pseudo-class for matching the first child element of a given class. At the time this answer was first posted, the newly published FPWD of Selectors level 4 introduced an :nth-match()
pseudo-class, designed around existing selector mechanics as I mentioned in the first paragraph by adding a selector-list argument, through which you can supply the rest of the compound selector to get the desired filtering behavior. In recent years this functionality was subsumed into :nth-child()
itself, with the selector list appearing as an optional second argument, to simplify things as well as averting the false impression that :nth-match()
matched across the entire document (see the final note below).
While we await cross-browser support (seriously, it's been nearly 10 years, and there has only been a single implementation for the last 5 of those years), one workaround that Lea Verou and I developed independently (she did it first!) is to first apply your desired styles to all your elements with that class:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~
in an overriding rule:
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
Now only the first element with class="red"
will have a border.
Here's an illustration of how the rules are applied:
.home > .red {
border: 1px solid red;
}
.home > .red ~ .red {
border: none;
}
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
CSS selector: first div within an id or class
If you want to select the first div
within a specific class then you can use:
.class div:first-child
This however won't work when you've got the following HTML:
<div class="class">
<h1>The title</h1>
<div>The CSS won't affect this DIV</div>
</div>
It won't work because the div
isn't the first child of the .class
. If you wan't to target that div
in this case I'd suggest adding another container (or adding a class to that div
whatever you like :) )
How to apply CSS to first child div element only?
You can play with :first-child
CSS selector, for example if you want to target the first div
child of .node-master
:
.node-master > div:first-child {
color: red;
}
CSS - selector for first element anywhere under a parent
#wrapper label:first-of-type
won't work as every label
is the first of it's type within it's immediate parent. That's the key here, these sorts of selectors are always relative to the immediate parent.
So, you could do something like this:
#wrapper div:first-child > label
which would select any label
elements which are an immediate child of a div
which is the first child within it's parent
Related Topics
Why Not Use Margin Positioning Instead of Using Position:Relative Top 5Px
Sass Mixin Error for Ie Specific Filters Like -Ms-Filter
How Often Is the Default Font Size in the Browser Not 16Px
How to Change the CSS of Color of Select2 Tags
CSS - Vertically Center an Image Within a Floated Div
Create Angular Material Theme with CSS Variables
Z-Index Behaviour on Pseudo Elements
Css: How to Attach an Arrow to a Div and Make It Overlap the Border
:Hover Is Not Working Properly in IE9
Search Button Inside the Search Box Like Bing
Can an Abbr Tag's Title Be Styled
How to Change Background Image Based on Screen Size, Possibly with Bootstrap
White Blur Around Image When Using CSS3 Blur Filter
Css3 Scale() Causes Divs to Become Pixelated
Aligning <Li> Next to Each Other, Not Working
Evenly-Spaced Navigation Links That Take Up Entire Width of Ul in CSS3