Re: [css-d] pseudo-class :not Selector

[Tom Livingston]

Do you have anything in your styles like:

-webKit-appearance:none;

This will remove the arrow. I recently had this issue and just removed it
and styled as best I could without it.


On Thursday, September 24, 2015, Marie-Ange Demeulemeester <
marie.demeulemees...@gmail.com> wrote:

> Hi,
>
> I can’t succeed to give properties on:
>
>
>
> html div.x select{...}
>
> And not to
>
> html.linux.safari div.x select{...}
>
>
>
> This works:
>
> html:not(linux) div.x select{...}
>
> html:not(safari) div.x select{...}
>
> but I need both conditions
>
> This doesn’t work:
>
> html:not(linux.safari) div.x select{...}
>
>
>
>
>
> Code:
>
> 
>
> 
>
> 
>
> 
>
> OR
>
> 
>
> 
>
> 
>
> 
>
>
>
>
> Who can help me?
>
> Thanks a lot.
>
>
>
>
> Regards,
> Marie-Ange
>
>
>
>
> (Side info: I need this to solve the bug in android stock browsers with
> responsive design. Problem; When you add a border or background to a
> select, the arrow and border anymore on that dropdown box are not visible
> anymore.)
> __
> css-discuss [css-d@lists.css-discuss.org ]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] pseudo-class :not Selector

[Marie-Ange Demeulemeester]

Hi,

I can’t succeed to give properties on:



html div.x select{...}

And not to

html.linux.safari div.x select{...}



This works:

html:not(linux) div.x select{...}

html:not(safari) div.x select{...}

but I need both conditions

This doesn’t work:

html:not(linux.safari) div.x select{...}





Code:









OR












Who can help me?

Thanks a lot.




Regards,
Marie-Ange




(Side info: I need this to solve the bug in android stock browsers with
responsive design. Problem; When you add a border or background to a
select, the arrow and border anymore on that dropdown box are not visible
anymore.)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] pseudo-class :not Selector

[Crest Christopher]

The HTML word representing a tag threw me off for the question.

Philippe Wittenbergh wrote:

On Sep 25, 2015, at 07:06, Marie-Ange 
Demeulemeester  wrote:

I can’t succeed to give properties on:



html div.x select{...}

And not to

html.linux.safari div.x select{...}



This works:

html:not(linux) div.x select{...}

html:not(safari) div.x select{…}


Are you sure that “works”? It is a bit a non-sensical selector in an HTML 
context.

This translates as: “ select any select descendant of a div with class 'x' that 
is a descendant of a html element which is not a linux element”

Try this to translate your selectors in some human readable language:
http://gallery.theopalgroup.com/selectoracle/

You probably mean:
html:not(.linux) div.x select {}  /* note the leading period before the `linux` 
*/



but I need both conditions

This doesn’t work:

html:not(linux.safari) div.x select{…}


that won't work per CSS3 selectors, even assuming a leading period before the 
`linux`. You can't chain multiple classes inside the :not() pseudo-class.

this should work:
html:not(.linux):not(.safari) div.x select {}


(Side info: I need this to solve the bug in android stock browsers with
responsive design. Problem; When you add a border or background to a
select, the arrow and border anymore on that dropdown box are not visible
anymore.)


See Tom's answer.
Styling select widgets in blink/webkit browsers is trivial, but you have to 
style the whole thing yourself.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] pseudo-class :not Selector

[Philippe Wittenbergh]

> On Sep 25, 2015, at 07:06, Marie-Ange Demeulemeester 
>  wrote:
> 
> I can’t succeed to give properties on:
> 
> 
> 
> html div.x select{...}
> 
> And not to
> 
> html.linux.safari div.x select{...}
> 
> 
> 
> This works:
> 
> html:not(linux) div.x select{...}
> 
> html:not(safari) div.x select{…}

Are you sure that “works”? It is a bit a non-sensical selector in an HTML 
context.

This translates as: “ select any select descendant of a div with class 'x' that 
is a descendant of a html element which is not a linux element”

Try this to translate your selectors in some human readable language:
http://gallery.theopalgroup.com/selectoracle/

You probably mean:
html:not(.linux) div.x select {}  /* note the leading period before the `linux` 
*/


> 
> but I need both conditions
> 
> This doesn’t work:
> 
> html:not(linux.safari) div.x select{…}

that won't work per CSS3 selectors, even assuming a leading period before the 
`linux`. You can't chain multiple classes inside the :not() pseudo-class.

this should work:
html:not(.linux):not(.safari) div.x select {}

> (Side info: I need this to solve the bug in android stock browsers with
> responsive design. Problem; When you add a border or background to a
> select, the arrow and border anymore on that dropdown box are not visible
> anymore.)

See Tom's answer.
Styling select widgets in blink/webkit browsers is trivial, but you have to 
style the whole thing yourself.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/