CSS first and last child elements
/* CSS used here will be applied after bootstrap.css */
.container { width: 100%; padding 25px 40px;}.container > .btn { min-width: 35%;}.btn:first-child { float: left;}.btn:last-child { float: right;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /><div class="container"> <button type="button" class="btn btn-default">On</button> <button type="button" class="btn btn-default">Off</button></div>
Problems with first-child and last-child CSS selectors
[data-sigil="reactions-bling-bar"]:first-child:last-child
targets an element with a data attribute called sigil
that is both the first and last child of its parent.
I think you're looking for [data-sigil="reactions-bling-bar"] > :first-child > :last-child
, which would select the last child of the first child of the element with that data-sigil
attribute.
Css - Move first li element at the end
You can use CSS flex-direction and then set the "order" for the li:first-child
ul.careplus-infolist { display: flex; flex-direction: column;}
ul.careplus-infolist li:first-child { order: 3;}
<ul class="careplus-infolist"><li> <i class="careplus-bgcolor-two fa fa-envelope"></i> <span><a href="mailto:info@email.com" target="_blank">info@email.com</a></span> <span><a href="mailto:info@pec.email.com" target="_blank">info@pec.email.com</a></span> </li><li> <i class="careplus-bgcolor-two fa fa-clock-o"></i> <span>9:00 - 13:00</span> <span>15:00 - 18:00 pm</span> </li><li> <i class="careplus-bgcolor-two fa fa-map-marker"></i> Main Street 22 09030 Los Angeles CA </li></ul>
Add first and last classes to strings containing one or more p tags in PHP
You can index the node list with the item()
method, so you can add the attribute to the first and last elements in the list.
$dom = new DOMDocument();
$question_paragraphs = array();
$dom->loadHTML($q['quiz_question']);
$par = $dom->getElementsByTagName('p');
if ($par->length == 1) {
$par->item(0)->setAttribute("class", "first last");
} elseif ($par->length > 1) {
$par->item(0)->setAttribute("class", "first");
$par->item($par->length - 1)->setAttribute("class", "last");
}
foreach($par as $node)
{
$question_paragraphs[] = $dom->saveHTML($node);
}
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>
Related Topics
Styling a Hover Statement in Svg
Vertical Alignment of Column Rows in Bootstrap Grid
Tailwindcss Not Using My Custom Class Inside Breakpoints
Wrap Bootstrap Navbar List Items Around Centered Brand Image
CSS - How to Make Responsive Images
How to Style an Independent Tableview Column
How to Display Entire Option Value When Hovered in Mat-Autocomplete
Style Different Characters Inside: :After Content
CSS: How to Shrink First Div in Container Instead of Going Outside of Container
Apply a Class and an Attribute Selector
CSS Hoverable Dropdown Menu Doesn't Close on Mobile
How to Use CSS Sibling Select to Select a Tag with a Link That Follows a Tag with an Image