How can I set first element to display: none;?


Tags: css,wordpress,iframe,pseudo-element

Problem :

So I'm styling this posttype in Wordpress, and when the user links to a soundcloud track that track will show in the post header. Now, if that user posts more than one link I'd like the next ones to be in the content of the post, excluding the first one which already appears in the header.

This is what rougly is output:

<div class="content">
    <p><iframe/></p>
    <p><iframe/></p>
    <p><iframe/></p>
    <p><iframe/></p>
</div>

How do I style this in CSS so only the last three iframes displays?

Michael



Solution :

Try this:

.content:first-child{
    display: none;
}

    CSS Howto..

    How to locate element inside css footer

    how to display php search engine execution time and number of results before the results

    How to override css property?

    How do I handle modal dialog fadeout in jQuery UI?

    How to view the html code that is used to display hidden json data?

    How do I remove white space due to position relative of CSS?

    Rails 4: how to identify and format links, hashtags and mentions in model attributes?

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    HTML table show last column using media queries

    CSS Position relative goes over fixed how to fix this?

    IBM Worklight - How to disable Native device features?

    How can I style XML with CSS for viewing in a browser without first transforming to (X)HTML?

    ASP.NET - How to include CSS only if it isn't alrealy included?

    CSS: How to set a fallback for bold font families?

    How do I get this CSS/jQuery menu to open only on click, rather than hover?

    if i clone an element, when i customize (css) that element how can customize also the element cloned?

    Using SASS how to prevent a css file from being generated inside of the SASS folder?

    Table border not showing up

    How to ensure buttons reversed by CSS are spaced evenly?

    How to change the icon of a JStree node using only css?

    How do I vertically center align a position:relative element

    How to fix position of html element label with css?

    How to make an image behave like in Primefaces?

    parse JSON to HTML table: How do I format the css of the table?

    How to make TD behaving like TR(row) with CSS?

    How to add the img-responsive class in javascript

    How to distribute DIVS evenly (horizontal and vertical) that floats with each other?

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How can I set css for a class in a class?

    How to Toggle CSS3 Accordion on Click