    #many .more.selectors h4 + p { ... }

This is called the [adjacent sibling selector](http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors).

For your literal example you&#39;d want to use the adjacent selector (+).

    h4 + p {color:red}//any &lt;p&gt; that is immediately preceded by an &lt;h4&gt;

    &lt;h4&gt;Some text&lt;/h4&gt;
    &lt;p&gt;I&#39;m red&lt;/p&gt;
    &lt;p&gt;I&#39;m not&lt;/p&gt;
However, if you wanted to select all successive paragraphs, you&#39;d need to use the general sibling selector (~).

    h4 ~ p {color:red}//any &lt;p&gt; that has the same parent as, and comes after an &lt;h4&gt;

    &lt;h4&gt;Some text&lt;/h4&gt;
    &lt;p&gt;I&#39;m red&lt;/p&gt;
    &lt;p&gt;I am too&lt;/p&gt;

[It&#39;s known to be buggy in IE 7+ unfortunately][1].


  [1]: http://reference.sitepoint.com/css/generalsiblingselector

Just hit on this when trying to solve this type of thing my self.

I did a selector that deals with the element after being something other than a p.

    .here .is.the #selector h4 + * {...}

Hope this helps anyone who finds it :)

**Simplifying for the beginners:**

If you want to select an element immediately after another element you use the **`+`** selector.


**For example:**

**`div + p`** The `+` element selects all `&lt;p&gt;` elements that are placed immediately after `&lt;div&gt;` elements

___
If you want to learn more about selectors use this [table][1].


  [1]: https://www.w3schools.com/cssref/css_selectors.asp

I use latest CSS and &quot;+&quot; didn&#39;t work for me so I end up with

:first-child

How can I find out which method is best for a situation? Can anybody provide some examples to know the difference in terms of functionality and performance?

What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

I am using wget to download all images from a website and it works fine but it stores the original hierarchy of the site with all the subfolders and so the images are dotted around. Is there a way so that it will just download all the images into a single folder? The syntax I&#39;m using at the moment is:

    wget -r -A jpeg,jpg,bmp,gif,png http://www.somedomain.com

How do I use Wget to download all images into a single folder, from a URL?

I&#39;ve got the following HTML code on a page:

    &lt;h4&gt;Some text&lt;/h4&gt;
    &lt;p&gt;
    Some more text!
    &lt;/p&gt;

In my `.css` I&#39;ve got the following selector to style the `h4` element. The HTML code above is just a small part of the entire code; there are several `div`s more wrapped around belonging to a shadowbox:

    #sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
    {
        color               : #614E43;
        margin-top          : 5px;
        margin-left         : 6px;
    }

So, I have the correct style for my `h4` element, but I also want to style the `p` tag in my HTML.

Is this possible with CSS-selectors? And if yes, how can I do this?



Select first occurring element after another element

I've got the following HTML code on a page:
<pre><code class="hljs language-css">&#x3C;h4>Some text&#x3C;/h4>
&#x3C;p>
Some more text!
&#x3C;/p>
</code></pre>
In my <code>.css</code> I've got the following selector to style the <code>h4</code> element. The HTML code above is just a small part of the entire code; there are several <code>div</code>s more wrapped around belonging to a shadowbox:
<pre><code class="hljs language-less">#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
 color : #614E43;
 margin-top : 5px;
 margin-left : 6px;
}
</code></pre>
So, I have the correct style for my <code>h4</code> element, but I also want to style the <code>p</code> tag in my HTML.
Is this possible with CSS-selectors? And if yes, how can I do this?

How can I detect when the user cancels a file input using an html file input?

onChange lets me detect when they choose a file, but I would also like to know when they cancel (close the file choose dialog without selecting anything).



How to detect when cancel is clicked on file input?

I&#39;m trying to display my code on a website but I&#39;m having problems preserving the whitespace indentation correctly.

For instance given the following snippet:

    &lt;html&gt;
     &lt;body&gt;
       Here is my code:
       &lt;pre&gt;
         def some_funtion
           return &#39;Hello, World!&#39;
         end
       &lt;/pre&gt;
     &lt;body&gt;
    &lt;/html&gt;

This is displayed in the browser as:

    Here is my code:

         def some_funtion
           return &#39;Hello, World!&#39;
         end

When I would like it displayed as:

    Here is my code:

    def some_funtion
     return &#39;Hello, World!&#39;
    end

The difference is that that current indentation level of the HTML pre tag is being added to the indentation of the code. I&#39;m using nanoc as a static website generator and I&#39;m using google prettify to also add syntax highlighting.

Can anyone offer any suggestions? 


How to preserve whitespace indentation of text enclosed in HTML &lt;pre&gt; tags excluding the current indentation level of the &lt;pre&gt; tag in the document?

I want to add a style to a radio button&#39;s selected label:

**HTML:**

    &lt;div class=&quot;radio-toolbar&quot;&gt;
     &lt;label&gt;&lt;input type=&quot;radio&quot; value=&quot;all&quot; checked&gt;All&lt;/label&gt;
     &lt;label&gt;&lt;input type=&quot;radio&quot; value=&quot;false&quot;&gt;Open&lt;/label&gt;
     &lt;label&gt;&lt;input type=&quot;radio&quot; value=&quot;true&quot;&gt;Archived&lt;/label&gt;
    &lt;/div&gt;


**CSS**

&lt;!-- language: lang-css --&gt;

    .radio-toolbar input[type=&quot;radio&quot;] {display:none;}
    .radio-toolbar label {
    	background:Red;
    	border:1px solid green;
    	padding:2px 10px;
    }
    .radio-toolbar label + input[type=&quot;radio&quot;]:checked { 
    	background:pink !important;
    }

Any ideas what I&#39;m doing wrong? 

CSS - How to Style a Selected Radio Buttons Label?

**Answer**: `var option_user_selection = element.options[element.selectedIndex].text`

I am trying to build a form that fills in a person&#39;s order.

    &lt;form name=&quot;food_select&quot;&gt;
        &lt;select name=&quot;maincourse&quot; onchange=&quot;firstStep(this)&quot;&gt;
            &lt;option&gt;- select -&lt;/option&gt;
            &lt;option text=&quot;breakfast&quot;&gt;breakfast&lt;/option&gt;
            &lt;option text=&quot;lunch&quot;&gt;lunch&lt;/option&gt;
            &lt;option text=&quot;dinner&quot;&gt;dinner&lt;/option&gt;
        &lt;/select&gt;
    &lt;/form&gt;

What I&#39;m trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag. 

    function firstStep(element) {
        //Grab information from input element object
        /and place them in local variables
        var select_name = element.name;
        var option_value = element.value;
    }

I can get the name and the option value, but I can&#39;t seem to get the text=&quot;&quot; or the value=&quot;&quot; from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn&#39;t help

    var option_user_selection = element.options[ whatever they select ].text 

I also need to use the passed in select reference as that is how it&#39;s set up in the rest of my code. 

Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically. 

Getting an option text/value with JavaScript

I am trying to control HTML5 videos using JQuery. I have two clips in a tabbed interface, there are six tabs in total, the others just have images. I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked.

This must be a simple thing to do but I cant seem to get it to work, the code I am using to play the video is:

    $(&#39;#playMovie1&#39;).click(function(){
	  $(&#39;#movie1&#39;).play();
          });

I have read that the video element needs to be exposed in a function to be able to control it but can&#39;t find an example. I am able to make it work using JS:

    document.getElementById(&#39;movie1&#39;).play();

Any advice would be great. Thanks



Play/pause HTML 5 video using JQuery


I wanna create some loading dots, like this:

At 0000 miliseconds the span content is: `.`

At 0100 miliseconds the span content is: `..`

At 0200 miliseconds the span content is: `...`

In a loop.

What is the best / easiest way to make it?

Dot dotdot dotdotdot as loading?

I have the following markup:

    &lt;div class=&quot;FixedHeightContainer&quot;&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
      &lt;div class=&quot;Content&quot;&gt;
        ..blah blah blah...
      &lt;/div&gt;
    &lt;/div&gt;

The CSS looks like this:

    .FixedHeightContainer
    {
      float:right;
      height: 250px;
      width:250px;  
    }
    .Content
    {
      ???
    }

Due to its content, the height of `div.Content` is typically greater than the space provided by `div.FixedHeightContainer`. At the moment, `div.Content` merrily extends out of the bottom of `div.FixedHeightContainer` - not at all what I want.

How do I specify that `div.Content` gets scrollbars (preferably vertical only, but I&#39;m not fussy) when its height is too great to fit?

`overflow:auto` and `overflow:scroll` are doing nothing, for some bizarre reason.

CSS: how to get scrollbars for div inside container of fixed height

Here is an example of the issue in question:

http://dev.madebysabotage.com/playground/overlay.html

You see there is a gray overlay over the entire page, but if you scroll down, the content below the initial loaded page doesn&#39;t have the overlay.

I have an `#overlay` div and it seems it doesn&#39;t keep the 100% height during scrolling, so trying to figure out how to pull that off.

Here&#39;s the full source:

   

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    html {
      height: 100%;
      min-height: 100%;
    }

    body {
      height: 100%;
      min-height: 100%;
      font-family: Georgia, sans-serif;
    }

    #overlay {
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      height: 100%;
      min-height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10000;
    }

    header,
    section,
    footer {
      width: 800px;
      margin: 0 auto 20px auto;
      padding: 20px;
      background: #ff0;
    }

    section {
      min-height: 1500px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;overlay&quot;&gt;&lt;/div&gt;
    &lt;header&gt;
      &lt;h1&gt;Header&lt;/h1&gt;
    &lt;/header&gt;
    &lt;section&gt;
      &lt;p&gt;Here&#39;s some sweet content&lt;/p&gt;
    &lt;/section&gt;
    &lt;footer&gt;
      &lt;p&gt;Here&#39;s my footer&lt;/p&gt;
    &lt;/footer&gt;

&lt;!-- end snippet --&gt;



CSS: How to get this overlay to extend 100% with scrolling?

In CSS, [you can do this](http://www.w3.org/TR/CSS2/selector.html#attribute-selectors):

    input[type=submit] {
      // properties
    }

It&#39;s a very useful for styling form buttons.

How do you do the same thing in SASS?

How do you define attribute selectors in SASS?

Using a standard list, I&#39;m trying to select the last 2 list items. I&#39;ve various permutations of `An+B` but nothing seems to select the last 2:

    li:nth-child(n+2) {} /* selects from the second onwards */
    li:nth-child(n-2) {} /* selects everything */
    li:nth-child(-n+2) {} /* selects first two only */
    li:nth-child(-n-2) {} /* selects nothing */

I&#39;m aware of a new CSS3 selectors like `:nth-last-child()` but I&#39;d prefer something that works in a few more browsers if possible (don&#39;t care about IE particularly).

Is it possible to select the last n items with nth-child?

How can you select all child elements recursively?

```css
div.dropdown, div.dropdown &gt; * {
    color: red;
}
```

This class only throws a class on the defined className and all immediate children. How can you, in a simple way, pick all childNodes like this:

```css
div.dropdown, 
div.dropdown &gt; *, 
div.dropdown &gt; * &gt; *, 
div.dropdown &gt; * &gt; * &gt; *, 
div.dropdown &gt; * &gt; * &gt; * &gt; * {
    color: red;
}
```

Select all child elements recursively in CSS

Is there a way of hiding an element&#39;s contents, but keep its `:before` content visible?
Say I have the following code:

HTML:

    &lt;span class=&quot;addbefore hidetext&quot;&gt;You are here&lt;/span&gt;
CSS:

    .addbefore:before {
        content: &quot;Show this&quot;;
    }
    .hidetext {
        // What do I do here to hide the content without hiding the :before content?
    }

I&#39;ve tried: 
 
 * using `display: none` and setting `display: inline` on `:before`, but both are still hidden  
 * using `width: 0; overflow: hidden`;, but then additional space seems to be added (?)  
 * using color: transparent;, but then, of course, the content of the span still takes up space  
 * using `text-indent: -....px`, but 
    1. this is frowned upon by search engines and 
    2. it seems not to work for span elements (?)  

Any other ideas as to how I might do this?

Hide element, but show CSS generated content

How can I select all elements whose `id` starts with &quot;player_&quot;?

I have multiple elements like this:

    &lt;div id=&quot;player_290x3dfda&quot;&gt;text&lt;/div&gt;

Every `id` has a unique stamp on it. How can I select all those elements, either with jQuery or with pure CSS?

Content Type	Original Author	Original Content on Stackoverflow
Question	Rob	View Question on Stackoverflow
Solution 1 - Html	Phrogz	View Answer on Stackoverflow
Solution 2 - Html	Joel Mellon	View Answer on Stackoverflow
Solution 3 - Html	Tom	View Answer on Stackoverflow
Solution 4 - Html	Trooller	View Answer on Stackoverflow
Solution 5 - Html	VNicholson	View Answer on Stackoverflow

Select first occurring element after another element

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

Solution 5 - Html

How do I use Wget to download all images into a single folder, from a URL?

What is the difference between XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

Attributions