How to Hide Selected K2 Extra Fields from the front end?

K2 component (getk2.org) for Joomla 2.5 and Joomla 3.0 is still a very useful extension. K2 was built as a complete replacement of the default article system in Joomla! but many people use it in a surprising way, like the people's profiles in the online Marriage Agency.

K2 can keep the information in articles about thousands of women/men of different age, appearance and occupation. For personal characteristics you can use K2 Extra Fields so you and your users will be able to sort people according to certain characteristics (age, eye color), like the products in the store.
Sometimes you might want to hide the selected custom fields, but only the front view of the article. And then what? Unfortunately, component K2 did not foresee such a possibility. If anyone is a programmer can modify the code, but I wanted to use a simple solution, non-invasive method.

CSS Pseudo-classes  Can Help You with K2 Extra Fields

Depending on which field you want to hide in order to select one of the solutions:

• :first-child - this pseudo-class matches an element only if it's the first child element of its parent element.
• :nth-child(N) - matches elements on the basis of their positions within a parent element’s list of child elements.
• :nth-last-child(N) - matches elements on the basis of their positions within a parent element’s list of child elements.

Now edit your template.css file or K2.css file and add only one line of CSS code at the bottom:

div.itemExtraFields ul li:first-child { display:none; }

It will hide first element of list, in our case, the first field.
This example selector will match the first three rows of Extra Field list:

div.itemExtraFields ul li:nth-child(-n+3) { display:none; }

This solution has "only one" defect - browser support - this pseudo-classes are currently not supported in Internet Explorer 8 and in older versions.