I'm trying to select <a> elements that are not the parents of <img> elements. (Note: if it's relevant some of the anchors I want to select are childless.) I tried this:
a > :not(img) {}
and this:
a:not(> img) {}
but neither of them seem to work. How would I accomplish this in CSS?
There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:
a:not(:has(img)) {
// Styles
}
The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.
I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.
Unfortunately, no. You'd need to use jQuery.
You could do some kind of workaround using CSS:
Assign a class to links that do not have child elements that are images and use that class to style the links as normal (e.g. a.class{color: red})
Assign a class to links that do have an image child element, and use a:not(.class){} to change their color
Reason: There is no parent selector in CSS. See:
Is there a CSS parent selector?, CSS Parent/Ancestor Selector
I have a <input> inside a <div>.
Now if I use the pseudo-class :hover both of the elements gets the pseudo-class.
But If i use :focus only the <input> gets that pseudo-class.
I have read that only certain elements can have the :focus pseudo-class and <div> is not one of them.
Now I wonder if there is some other pseudo-class I can use that exist on both tags with similar behavior as :focus, but will appear on both tags like :hover does.
UPDATE:
plunker illustrating the problem.
Effectively, in order to be able to be focused, an element needs to be focusable:
An element is focusable if all of the following conditions are
met:
The element's tabindex focus flag is set.
The element is either being rendered or is a descendant of a canvas element that represents embedded content.
The element is not inert.
The element is not disabled.
In your case, the problem is the first condition. You can make the div focusable by setting its tabindex focus flag through a tabindex attribute.
p:focus {
background: #0f0;
}
<p tabindex="-1">Click me. I can be focused</p>
<p>But I can't :(</p>
However, there is a problem. There can only be one focused element in the document. Therefore, the div and the input can't be focused simultaneously.
In fact, you don't want to select the div when it is focused, you want to select it when it contains a focused element.
The Selectors Level 4 draft addresses this exact problem by creating the new :focus-within pseudo-class:
9.4. The Generalized Input Focus Pseudo-class:
:focus-within
The :focus-within pseudo-class applies to elements for which
the :focus pseudo class applies. Additionally, the ancestors
of an element that matches :focus-within also match
:focus-within.
Sadly browsers don't support it yet. So meanwhile, use JS.
I don't think you can do what you want with just CSSyou may need a bit of jquery like:
$(document)
.on("focus", "input", function(){
///here what you want, in this example add a class to your div
$('div').addClass("divfocus");
})
JSFIDDLE
I have a text input that is wrapped inside a div. I want to change a css attribute of the :after of the parent div when the input is focused. How can I do this in CSS?
<div class="dataInputTextContainer">
<input class="dataInputText" />
</div>
I tried this but it did not work:
.dataInputText:FOCUS ~ .dataInputTextContainer:after{
background-color: red;
}
Simply put, you cant
(sorry)
CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.
What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.
Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?
If you didn't apply style on :after of the parent but rather put a tag at the same level than the input, you could have used this syntax to apply style of the sibling tag.
I am trying to add content to the selected option in a drop down list using css, when the drop down is closed. Specifically I want the drop down to say
Sort by: Option1
when closed and when you open the drop down you then see Option 1, Option 2 etc
I found this:
CSS :selected pseudo class similar to :checked, but for <select> elements
which shows how to apply a style to the right thing, but when I try and apply :before to the option element, nothing appears, in any circumstances. That is, I cannot seem to use the
option:before{
content:"before option"
}
as a rule to any effect.
Is this always the case for option elements? I also found that I could not wrap option text in span classes, so I can't do it that way.
You should be using a <label> to indicate what the <select> is for. You cannot use pseudo-elements on <option> elements because only <option> elements are valid within a <select>. The other reason you wouldn't want to do this is because pseudo-elements are typically skipped by screen readers, making the label non-accessible to a portion or the population and certain assistive technologies.
This is the proper way to associate a label such as "Sort by" with a drop down list:
Demo
<label>
Sort by:
<select>
<option>one</option>
<option>two</option>
</select>
</label>
or
<label for="my-select">Sort by: </label>
<select id="my-select">
<option>one</option>
<option>two</option>
</select>
If you require "Sort by: " within the drop-down list, you should add that label within the HTML or inject it with JavaScript as CSS cannot do this. I would suggest arguing that it is not the right way to go with your designer however as you will have a bunch of redundant text and the drop-down will just look ugly.
This is how you would go about injecting the label within the drop-down using jQuery:
Demo
$('option').each(function () {
$(this).text("Sort by: " + $(this).text());
});
In the CSS 2.1 spec, the :before pseudo-element is somewhat vaguely defined, and it says: “Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” Although option is not empty like input, it is still rather special. There is no clarifying definition in newer CSS specs.
In practice, browsers mostly ignore :before and :after for control elements like select and their children. Testing with Firefox, IE, Chrome shows that currently only Firefox implemens option:before { content: ... }, and only when the select element is “open” (either focused so that the option list is opened or has a size attribute with a value larger than 1).
So the approach is not feasible, and you should consider a better way to deal with the ultimate problem. Apparently, you have already found out that a visible label is to be preferred to using generated content.
When looking at most sites (including SO), most of them use:
<input type="button" />
instead of:
<button></button>
What are the main differences between the two, if any?
Are there valid reasons to use one instead of the other?
Are there valid reasons to use combine them?
Does using <button> come with compatibility issues, seeing it is not very widely used?
Here's a page describing the differences (basically you can put html into a <button></button>)
And another page describing why people avoid <button></button> (Hint: IE6)
Another IE problem when using <button />:
And while we're talking about IE, it's
got a couple of bugs related to the
width of buttons. It'll mysteriously
add extra padding when you're trying
to add styles, meaning you have to add
a tiny hack to get things under
control.
Just as a side note, <button> will implicitly submit, which can cause problems if you want to use a button in a form without it submitting. Thus, another reason to use <input type="button"> (or <button type="button">)
Edit - more details
Without a type, button implicitly receives type of submit. It does not matter how many submit buttons or inputs there are in the form, any one of them which is explicitly or implicitly typed as submit, when clicked, will submit the form.
There are 3 supported types for a button
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"
This article seems to offer a pretty good overview of the difference.
From the page:
Buttons created with the BUTTON element function just like buttons
created with the INPUT element, but
they offer richer rendering
possibilities: the BUTTON element may
have content. For example, a BUTTON
element that contains an image
functions like and may resemble an
INPUT element whose type is set to
“image”, but the BUTTON element type
allows content.
The Button Element - W3C
Inside a <button> element you can put content, like text or images.
<button type="button">Click Me!</button>
This is the difference between this element and buttons created with the <input> element.
Quote
Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
From : http://www.w3schools.com/tags/tag_button.asp
If I understand correctly, the answer is compatibility and input consistency from browser to browser
I will quote the article The Difference Between Anchors, Inputs and Buttons:
Anchors (the <a> element) represent hyperlinks, resources a person can navigate to or download in a browser. If you want to allow your user to move to a new page or download a file, then use an anchor.
An input (<input>) represents a data field: so some user data you mean to send to server. There are several input types related to buttons:
<input type="submit">
<input type="image">
<input type="file">
<input type="reset">
<input type="button">
Each of them has a meaning, for example "file" is used to upload a file, "reset" clears a form, and "submit" sends the data to the server. Check W3 reference on MDN or on W3Schools.
The button (<button>) element is quite versatile:
you can nest elements within a button, such as images, paragraphs, or
headers;
buttons can also contain ::before and ::after pseudo-elements;
buttons support the disabled attribute. This makes it easy to turn
them on and off.
Again, check W3 reference for <button> tag on MDN or on W3Schools.
Although this is a very old question and might not be relevant anymore, please keep in mind that most of the problems that the <button> tag used to have don't exist anymore and therefore is highly advisable to use it.
In case you cannot do so for various reasons, just keep in mind to add the attribute role=”button” in your tag as of accessibility.
This article is quite informative: https://www.deque.com/blog/accessible-aria-buttons/
Quoting the Forms Page in the HTML manual:
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to "image", but the BUTTON element type allows content.
Use button from input element if you want to create button in a form. And use button tag if you want to create button for an action.
<button>
by default behaves like if it had a "type="submit" attribute
can be used without a form as well as in forms.
text or html content allowed
css pseudo elements allowed (like :before)
tag name is usually unique to a single form
vs.
<input type='button'>
type should be set to 'submit' to behave as a submitting element
can only be used in forms.
only text content allowed
no css pseudo elements
same tag name as most of the forms elements (inputs)
--
in modern browsers, both elements are easily styleable with css but in most cases, button element is preferred as you can style more with inner html and pseudo elements
As far as CSS styling is concerned the <button type="submit" class="Btn">Example</button> is better as it gives you the ability to use CSS :before and :after pseudo classes which can help.
Due to the <input type="button"> visually rendering different to an <a> or <span> when styled with classes in certain situations I avoid them.
It's very worth noting the current top answer was written in 2009. IE6 isn't a concern now days so <button type="submit">Wins</button> styling consistency in my eyes comes out on top.
I just want to add something to the rest of the answers here. Input elements are considered empty or void elements (other empty elements are area , base , br , col , hr , img , input , link , meta , and param. You can also check here), meaning they cannot have any content. In addition to not having any content, empty elements cannot have any pseudo-elements like ::after and ::before, which I consider a major drawback.
There is a big difference if you are using jQuery. jQuery is aware of more events on inputs than it does on buttons. On buttons, jQuery is only aware of 'click' events. On inputs, jQuery is aware of 'click', 'focus', and 'blur' events.
You could always bind events to your buttons as needed, but just be aware that the events that jQuery automatically is aware of are different. For example, if you created a function that was executed whenever there was a 'focusin' event on your page, an input would trigger the function but a button would not.
<button> is flexible in that it can contain HTML. Moreover, it is much easier to style using CSS, and the styling actually gets applied across all browsers. However, there are some drawbacks regarding Internet Explorer (Eww! IE!). Internet Explorer does not detect the value attribute properly, using the tag's content as the value. All of the values in a form are sent to the server-side, regardless of whether or not the button is clicked. This makes using it as a <button type="submit"> tricky and a pain.
<input type="submit"> on the other hand doesn't have any value or detection issues, but you can't, however, add HTML like you can with <button>. It's also harder to style, and the styling doesn't always respond well across all browsers. Hope this helped.
in addition, one of the differences can come from provider of the library, and what they code. for example here i'm using cordova platform in combination with mobile angular ui, and while input/div/etc tags work well with ng-click, the button can cause Visual Studio debugger to crash, surely by differences, that the programmer caused; note that MattC answer point to the same issue, the jQuery is just a lib, and the provider didn't think of some functionality on one element, that s/he provides on another. so when you are using a library, you may face an issue with one element, which you won't face with another. and simply the popular one like input, will mostly be the fixed one, just because it's more popular.
It's also worth mentioning , that the disabled attribute doesn't work well on button for ios- safari (see also - # Khris Vandal comment ).
This happened to me as well .