I am trying to hide the first 3 elements having the class `.row` inside the block `.container`.

What I&#39;m doing is hiding all the `.row` first, and then I am trying to display the first 3 `.row` by using `.row:nth-child(-n+3)`

jsfiddle here:  http://jsfiddle.net/z8fMr/1/

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .row {
      display: none;
    }

    .row:nth-child(-n+3) {
      display: block;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;content&quot;&gt;

      &lt;div class=&quot;notarow&quot;&gt;I&#39;m not a row and I must remain visible&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 1&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 2&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 3&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 4&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 5&lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;Row 6&lt;/div&gt;

    &lt;/div&gt;

&lt;!-- end snippet --&gt;

I have two problems here:

1. Row 3 is not displayed, am I using nth-child in the wrong way?
2. Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in css to just display the first 3 `.row` and then hide all the other `.row` ?

Thanks.

How to show the first N elements of a block and hide the others in css?

I want to apply some css for inputs elements and I want to do that only for inputs that are not disabled and are not submit type, below css is not working, maybe if someone can explain me how this must be added .

    input:not(disabled)not:[type=&quot;submit&quot;]:focus{
    box-shadow:0 0 2px 0 #0066FF;
    -webkit-box-shadow:0 0 4px 0 #66A3FF;
    }


Css pseudo classes input:not(disabled)not:[type=&quot;submit&quot;]:focus

Is it possible to have pseudo-classes using inline styles?

---

Example:

    &lt;a href=&quot;http://www.google.com&quot; style=&quot;hover:text-decoration:none;&quot;&gt;Google&lt;/a&gt;

I know the above HTML won&#39;t work but is there something similar that will?

P.S. I know I should use an external style sheet, and I do. I was just curious if this could be done using inline styles.

CSS Pseudo-classes with inline styles

Is there any functional difference between the CSS 2.1 `:after` and the CSS 3 `::after` pseudo-selectors (other than `::after` not being supported in older browsers)?  Is there any practical reason to use the newer specification?

:after vs. ::after

I&#39;m looking for a way to change the CSS rules for pseudo-class selectors (such as :link, :hover, etc.) from JavaScript.

So an analogue of the CSS code: `a:hover { color: red }` in JS.

I couldn&#39;t find the answer anywhere else; if anyone knows that this is something browsers do not support, that would be a helpful result as well.

Setting CSS pseudo-class rules from JavaScript

I know there is an official CSS3 `:checked` pseudo-class, but is there an `:unchecked` pseudo-class, and do they have the same browser support?

[Sitepoint&#39;s reference][1] doesn&#39;t mention one, however this [whatwg spec][2] (whatever that is) does.

I know the same result can be achieved when the `:checked` and `:not()` pseudo-classes are combined, but i&#39;m still curious:

    input[type=&quot;checkbox&quot;]:not(:checked) {
        /* styles */
    }

  [1]: http://reference.sitepoint.com/css/pseudoclass-checked
  [2]: http://www.whatwg.org/specs/web-controls/current-work/#pseudo-classes

**Edit:**

The w3c recommends the same technique

&gt; An unchecked checkbox can be selected by using the negation pseudo-class:
&gt;
&gt;     :not(:checked)

CSS3 :unchecked pseudo-class

How can I indent starting from the second line of a paragraph?

I&#39;ve tried

    p {
        text-indent: 200px;
    }
    p:first-line {
        text-indent: 0;
    }

and

    p {
        margin-left: 200px;
    }
    p:first-line {
        margin-left: 0;
    }

and 

    (with position:relative;)
    p {
        left: 200px;
    }
    p:first-line {
        left: 0;
    }

Indent starting from the second line of a paragraph with CSS

In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an `&lt;a&gt;` tag doesn&#39;t trigger when you tap on the element. How can I get this to trigger? Example code:

&lt;!-- language: lang-html --&gt;

    &lt;style&gt; 
    a:active { 
        background-color: red;
    }
    &lt;/style&gt;
    &lt;!-- snip --&gt;
    &lt;a href=&quot;#&quot;&gt;Click me&lt;/a&gt;

:active pseudo-class doesn&#39;t work in mobile safari

Things like `a:link` or `div::after`...

Information on the difference seems scarce.

What is the difference between a pseudo-class and a pseudo-element in CSS?

Is there a pseudo-class in CSS to specify 

    :not(:hover)

Or is that the only way to specify an item that is not being hovered?

I went through several CSS3 references, and I see no mention of a CSS pseudo-class to specify the opposite of :hover.

Is there an opposite CSS pseudo-class to :hover?

Is there a way to style the currently selected `&lt;option&gt;` element in a `&lt;select&gt;` element?

I could then give a background color to the currently selected option element? That way I can style the option that&#39;s currently viewable in the closed dropdown.

CSS :selected pseudo class similar to :checked, but for &lt;option&gt; elements

How can I select a certain element in a list of elements? I have the following:

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;myclass&quot;&gt;my text1&lt;/div&gt;
    &lt;!-- some other code follows --&gt;
    &lt;div&gt;
        &lt;p&gt;stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;p&gt;more stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;p&gt;
        &lt;span&gt;Hello World&lt;/span&gt;
    &lt;/p&gt;
    &lt;div class=&quot;myclass&quot;&gt;my text2&lt;/div&gt;
    &lt;!-- some other code follows --&gt;
    &lt;div&gt;
        &lt;p&gt;stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;p&gt;
        &lt;span&gt;Hello World&lt;/span&gt;
    &lt;/p&gt;
    &lt;input type=&quot;&quot;/&gt;
    &lt;div class=&quot;myclass&quot;&gt;my text3&lt;/div&gt;
    &lt;!-- some other code follows --&gt;
    &lt;div&gt;
        &lt;p&gt;stuff&lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;The end&lt;/footer&gt;

I have the CSS class `div.myclass {doing things}` that applies to all, obviously, but I also wanted to be able to select the first, second, or third div of class `.myclass` like this, **regardless of where they are in the markup**: 

&lt;!-- language: lang-css --&gt;

    div.myclass:first {color:#000;} 
    div.myclass:second {color:#FFF;} 
    div.myclass:third {color:#006;}

Almost like the jQuery index selection `.eq( index )`, which is what I am using currently, but I need a no-script alternative.

To be specific, I am looking for pseudo selectors, not things like adding another class or using IDs to make things work. 

How to select the first, second, or third element with a given class name?

I have some css menus on my site that expand with `:hover` (without js)

This works in a semi-broken way on iDevices, for example a tap will activate the `:hover` rule and expand the menu, but then tapping elsewhere doesn&#39;t remove the `:hover`. Also if there is a link inside the element that is `:hover`&#39;ed, you have to tap twice to activate the link (first tap triggers `:hover`, second tap triggers link).

I&#39;ve been able to make things work nicely on iphone by binding the `touchstart` event.

The problem is that sometimes mobile safari still chooses to trigger the `:hover` rule from the css &lt;i&gt;instead&lt;/i&gt; of my `touchstart` events!

I know this is the problem because when I disable all the `:hover` rules manually in the css, mobile safari works great (but regular browsers obviously don&#39;t anymore).

Is there a way to dynamically &quot;cancel&quot; `:hover` rules for certain elements when the user is on mobile safari?

See and compare iOS behavior here: http://jsfiddle.net/74s35/3/
Note: that only some css properties trigger the two-click behavior, e.g. display:none; but not background: red; or text-decoration: underline;


Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

I&#39;m trying to style a disabled input. I can use:

    .myInput[disabled] { }

or

    .myInput:disabled { }

Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can&#39;t find any info on whether they are the old way and won&#39;t be supported or whether they&#39;re both equal and you can use whatever you like best.

I have no need to support older browsers (it&#39;s an intranet application), so is it:

 - attribute is newer and better
 - pseudo-class is still the way to go
 - whichever you like best
 - there&#39;s a technical reason to use one over the other

Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

Is there any way to limit css3&#39;s `nth-of-type` to a class? I&#39;ve got a dynamic number of `section` elements with different classes designating their layout needs. I&#39;d like to grab every 3rd `.module`, but it seems that `nth-of-type` looks up classes element type and then calculates the type. Instead I&#39;d like to limit it to only `.module`s.

Thanks!

JSFiddle to demonstrate: http://jsfiddle.net/danielredwood/e2BAq/1/

HTML:

    &lt;section class=&quot;featured video&quot;&gt;
        &lt;h1&gt;VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO (3)&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class=&quot;featured module&quot;&gt;
        &lt;h1&gt;NOT A VIDEO (6)&lt;/h1&gt;
    &lt;/section&gt;

​CSS:

    .featured {
      width:31%;
      margin:0 0 20px 0;
      padding:0 3.5% 2em 0;
      float:left;
      background:#ccc;
    }
      .featured.module:nth-of-type(3n+3) {
        padding-right:0;
        background:red;
      }
      .featured.video {
        width:auto;
        padding:0 0 2em 0;
        float:none;
      }​

css3 nth of type restricted to class

I can&#39;t seem to find much information about this.

[Smashing Magazine](http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/) seems to be saying that `html` and `:root` are the same thing but surely there must be a tiny difference?

What&#39;s the difference between CSS3&#39;s :root pseudo class and html?

In CSS it is possible to style `placeholder` text within an input using a combination of vendor-specific pseudo-classes and pseudo-elements (to get the best cross-browser coverage).

These all share the same basic properties (ie: text styling and color declarations).

However whilst I inevitably want to apply the same styles irrespective of browser vendor, it doesn&#39;t appear to be possible to combine these together into a comma-separated selector (as you would with any other piece of CSS where you want two selectors to share the same styles).

As an example, I tend to target placeholder styling using the four following selectors:

 - `input:-moz-placeholder`
 - `input::-moz-placeholder`
 - `input:-ms-input-placeholder`
 - `input::-webkit-input-placeholder`

(although `:-moz-placeholder` [is being deprecated][1] in favor of `::-moz-placeholder` this only occurred with the release of FireFox 19 so at present both are needed for better browser-support). 

What&#39;s frustrating is that declaring and giving each (the same) style leads to a lot of repetition within the CSS.

So, to make sure that placeholder text is right-aligned and italic, I would end up with:

&lt;!-- language-all: lang-css --&gt;

    input:-moz-placeholder{
        font-style: italic;
        text-align: right;
    }
    input::-moz-placeholder{
        font-style: italic;
        text-align: right;
    }
    input:-ms-input-placeholder{
        font-style: italic;
        text-align: right;
    }
    input::-webkit-input-placeholder{
        font-style: italic;
        text-align: right;
    }

What I really want to do is to combine them as one single comma-seperated rule set like this:

    input:-moz-placeholder,
    input::-moz-placeholder,
    input:-ms-input-placeholder,
    input::-webkit-input-placeholder{
        font-style: italic;
        text-align: right;
    }

However, despite trying this on a fair few occasions, this never seems to work.  It makes me concerned that there&#39;s some fundamental part of CSS that I&#39;m not understanding.

Can anybody shed any light on why this happens?


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder

Why isn&#39;t it possible to combine vendor-specific pseudo-elements/classes into one rule set?

How can I write `:hover` and `:visited` condition for `a:before`?

I&#39;m trying `a:before:hover`, but it&#39;s not working.





How can I write a &#39;:hover&#39; condition for &#39;a:before&#39; and &#39;a:after&#39;?

I know there is a `:focus` selector. I can&#39;t seem to find use of or documentation of a `:blur` selector. Is there one?

Does CSS have a :blur selector (pseudo-class)?

I have a this setup:

    &lt;div id=&quot;button&quot;&gt;Button&lt;/div&gt;

and this for CSS:

    #button	{
        color: #fff;
        display: block;
        height: 25px;
        margin: 0 10px;
        padding: 10px;
        text-indent: 20px;
        width: 12%;
    }

    #button:before {
        background-color: blue;
        content: &quot;&quot;;
        display: block;
        height: 25px;
        width: 25px;
    }

Is there a way to give the pseudo element a hover effect such as `#button:before:hover {...}` and is it also possible to get the pseudo element to hover in response to another element being hovered like so: `#button:hover #button:before {...}`? CSS only would be nice, but also jQuery is fine too.

How to make a hover effect for pseudo elements?

What is the difference between the `:focus` and `:active` pseudo-classes?

What is the difference between :focus and :active?

What is the proper way to apply ```:before``` and ```:after``` pseudo classes to styled components?

I know that you can use 

```&amp;:hover {}```

to apply the ```:hover``` pseudo class to a styled-component. 

Does this work for All pseudo elements like before and after? 

I have tried using the ```&amp;:before``` and ```&amp;:after``` strategy with some rather complex examples and i&#39;m not sure if my attempts are not working because i&#39;ve got something wrong with my example or it just doesn&#39;t work like that. 

Does someone have some insight on this? Thank you.

Before and After pseudo classes used with styled-components

The &lt;a href=&quot;http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act&quot;&gt; &lt;b&gt;CSS3 doc&lt;/b&gt;&lt;/a&gt; talks about :hover and :focus, which seem exactly the same to me. What are the differences between the two? What am I not seeing?

Thanks!

Differences between CSS3 :hover and :focus?

I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent. 

I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title. 

I considered using a background gradient that goes transparent where the words are, but since each title could be a different length, I wouldn&#39;t know where to put the stops. 

Here is the CSS so far:

    h1 {  
        text-align: center;  
        position: relative;  
        font-size: 30px;  
        z-index: 1;  
    }  

    h1:after {  
        content: &#39;&#39;;  
    	background-color: red;  
    	height: 1px;  
    	display: block;  
    	position: absolute;  
    	top: 18px;  
    	left: 0;  
        width: 100%;  
    }  

Here is where I&#39;m at: 
http://jsfiddle.net/XWVxk/1/

Can this be done with CSS without adding any extra HTML?

All Pseudo Class Solutions on Gang of Coders

Total of 24 Pseudo Class Solutions