How to select the first type of child of a particular CSS using CSS selector [duplicate]


Tags: css,css3

Problem :

This question already has an answer here:

HTML:

<form id="myForm">
  <p>Lorem ipsum</p>
  <p>Lorem ipsum 2 </p>
  <div class="section">Section 1</div>
  <div class="section1">section 2</div>
  <div class="section">Section 3</div>
  <div class="section1">section 4</div>
  <p>Lorem ipsum</p>
</form>`

CSS:

#myForm div.section1:first {
  color: red;
  font-size: 1.5em;
}

Question: How to write CSS selector to select the first section1 CSS class under the form with text 'section 2'

The above CSS is not working



Solution :

You can't target it like that, but you can do something like this bellow. Basically overwriting the rest with the default.

A much better approach would be to have different markup.

#myForm div.section1 {
  font-size:1.5em;color:red;
}

#myForm div.section1 ~ .section1 {
  font-size:1em;
  color:black;
}
<form id="myForm">
  <p>Lorem ipsum</p><p>Lorem ipsum 2 </p>
  <div class="section">Section 1</div>
  <div class="section1">section 2</div>
  <div class="section">Section 3</div>
  <div class="section1">section 4</div>    <p>Lorem ipsum</p>
</form>


    CSS Howto..

    How to apply custom size to text field in rails

    How do I prevent child affected for transform scale in css3?

    How to test css with media queries

    Simple html page renders differently in Firefox and IE. How to fix it?

    How to change background-color of selected option in IE11?

    How do I get my tabs to line up properly using CSS?

    asp .net: how to change css on span tag in c#

    How to dynamically create a css style rule that is overridable by earlier rules

    How to change table width using css

    How To Turn JS Objects To HTML And Style With CSS

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to make a “wrappanel” in html?

    How to use google font

    Gulp : How to copy multiple files and keep the folder structure

    Prestashop - How to edit views [closed]

    How to extract r, g, b, a values from CSS color?

    How do I correctly locate a div within a list when making a horizontal nav bar with HTML/CSS?

    How to read CSS properties of elements dynamically loaded with external script on Android browser?

    Font-awesome not properly displaying on Firefox / how to vend via CDN?

    how to make background fit on screen bootstrap3

    How do I make a dropdown extend to the left?

    How can I get the CSS-Transforms to work

    how to set equal font size in table cells for mobile device html pages

    How to make application browser compatible

    How float divs inside a td

    How to disable Cufon on certain elements?

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to use HTMLElement.classList(.toggle)?

    How to insert a comma in the following code

    How to ask browsers to refresh (flush) the cache of my website?